首页 > 其他分享 >vue $bus 和 settimeout 实现setinterval

vue $bus 和 settimeout 实现setinterval

时间:2023-02-22 13:35:08浏览次数:40  
标签:vue setinterval bus setTimeToInterval delay window intervalTimeout setIntervalGe

main.js 实现 用settimeout 实现setinterval
window.$bus = new Vue()

window.setTimeToInterval = function (delay) {
  if (window.intervalTimeout) {
    clearTimeout(window.intervalTimeout)
    window.intervalTimeout = null
  }
  
  window.intervalTimeout = setTimeout(() => {
    log('定时请求时间为:' + delay)
    this.$bus.$emit('setIntervalGet')
    this.setTimeToInterval(delay)
  }, delay)
}
页面调用
mounted 的时候 加监听
    window.$bus.$on('setIntervalGet', function () {
      // do something
    })

destroyed 销毁监听
window.$bus.$off('setIntervalGet')

// 方法调用
window.setTimeToInterval(10)

 

标签:vue,setinterval,bus,setTimeToInterval,delay,window,intervalTimeout,setIntervalGe
From: https://www.cnblogs.com/loveMis/p/17144013.html

相关文章

  • vue项目中img动态导入的问题
    相信有些人应该都会遇到vue项目中动态加载图片的问题。就是觉得路径没有问题,但是还是报错。错误代码template:<el-cardv-for="(o,s_i)instyleList":key="s_i">......
  • Vue配置文件中的proxy配置
    Vue配置文件中的proxy配置https://huaweicloud.csdn.net/638eec24dacf622b8df8dafa.html?spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog......
  • Vue3开发教程(一、学习Vue前需要了解的内容)
    前言本文是笔者学习vue前端技术过程的总结,其中包括vue开发需要了解的相关技术如:node、ES6、TypeScript、vite、ElementUI。以vue作为主线来介绍相关技术,最后通过一个典型的......
  • vue3 ThreeJS 引入obj模型过暗的问题
      当我单纯地用MTLLoader引入材质,OBJLoader引入模型并添加到场景中时, 发现模型非常得暗. 需要将环境光的强度设置到3.5左右看起来才比较正常. 但正常情况下环境光......
  • vue3 门户网站搭建3-pinia
    引入pinia来方便处理全局变量。npminstallpinia 1、创建pinia 2、main中引入(我这里是直接写的index,所以导出的是stores) 3、定义变量 使用: ......
  • vue axios异步处理方案
    vueaxios异步处理方案1.使用setTimeout函数用延时处理(复杂一点逻辑会达不到效果) 实例:setTimeout(()=>{console.log('1');},300......
  • 在vue中动态的引入图片为什么要使用require
    在vue中动态的引入图片为什么要使用require有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require,我倒着都能背出来............
  • Vue - eslint默认验证,函数名称和括号相连报错
    如果函数名和括号相连,eslint验证会报错,这个可以通过eslint的设置解决:一,打开eslintrc.js,在rules配置中加入:'space-before-function-paren':0完整配置:rules:{/......
  • Vue笔记
    Vue快速入门笔记七大属性学习vue我们必须之到它的7个属性,8个方法,以及7个指令。787原则。el属性用来指示vue编译器从什么地方开始解析vue的语法,可以说是一个占位符......
  • vue2、vue3安装vue-devtools详细版教程
    在使用Vue时,我们推荐在浏览器上安装VueDevtools。VueDevtools是Vue官方发布的调试浏览器插件,可以安装在Chrome和Firefox等浏览器上,直接内嵌在开发者工具中,使用......