精华内容
下载资源
问答
  • 主要介绍了在vue中使用setInterval的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vuesetInterval 创建和销毁

    千次阅读 2020-05-31 17:14:54
    setInterval 是间隔调用,与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。 比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志: <template> <div> <p v-for=...

    问题

    setInterval 是间隔调用,与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。

    比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志:

    <template>
    	<div>
    		<p v-for="item in logList" :key="item.time">
    			<span>{{"[" + item.time + "]"}}</span>
    			<span>{{ item.log }}</span>
    		</p>
    	</div>
    </template>
    <script>
    	import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'
    	import { getLogList } from './api'
    	@Component({})
    	export default class extends Vue {
    		logList = []
    		timer = null
    		mounted(){
    			this.getData()
    		}
    		async getData(){
    			let r = await getLogList()
    			if(r && r.logList){
    				this.logList = r.logList
    			}
    			this.timer = setTimeout(()=>{
    				console.log(this.timer);
    				this.getData()
    			}, 1000)
    		}
    		beforeDestory(){
    			clearTimeout(this.timer)
    			this.timer = null;
    		}
    	}
    </script>
    

    这段代码看上去没啥问题,但是测试的时候你会发现,有时候路由已经跳转了,获取进程日志的接口依然在不断调用,甚至,有时候接口调用速度非常快,一秒可能有好几个请求。

    分析

    beforeDestory 是组件销毁前的生命周期的钩子,这个钩子函数一定会调用,但是能不能彻底销毁 setTimeout 呢?答案是不能。

    打开控制台就能看到不断打印出来的 id
    在这里插入图片描述

    这是因为,每次使用 clearTimeout 清除掉的是上一次的 id, 而不是本次正要执行的,这种情况,对于使用 setInterval 也是一样的。

    根本原因在于,每次调用 getData, this.timer 是在不断的被赋予新的值,而不是一成不变的。

    在以前的原生 js 中,我们通常这样写:

    var timer = null
    function init(){
    	timer = setInterval(function(){
    		getData()
    	})
    }
    function getData(){}
    window.onload = init
    window.onunload = function(){
    	clearInterval(timer)
    }
    

    由于上面的 timer 始终保持一个值,所以这里的清除是有效的

    解决

    vue 提供了 程序化的事件侦听器 来处理这类边界情况

    按照文档的说法,我们的代码可以这样来更改

    <script>
    	import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'
    	import { getLogList } from './api'
    	@Component({})
    	export default class extends Vue {
    		logList = []
    		// timer = null
    		mounted(){
    			this.getData()
    		}
    		async getData(){
    			let r = await getLogList()
    			if(r && r.logList){
    				this.logList = r.logList
    			}
    			const timer = setTimeout(()=>{
    				this.getData()
    			}, 1000)
    			this.$once('hook:beforeDestroy', function () {
    			    clearTimeout(timer)
    			})
    		}
    	}
    </script>
    

    这样写,还解决了两个潜在问题

    1. 在组件实例中保存这个 timer,最好只有生命周期钩子有访问它的权限。但是实例中的 timer 会视为杂物
    2. 如果建立代码独立于清理代码,会使得我们比较难于程序化地清理所建立的东西

    如果你是在项目中引入了 ts,那么可能会导致在组件销毁的时候,定时器不能成功清除,这时候,你需要使用

    const timer = window.setTimeout(()=>{
    	this.getData()
    }, 1000)
    this.$once('hook:beforeDestroy', function () {
        window.clearTimeout(timer)
    })
    

    如果你漏掉了其中一个 window,那么很可能会遇上类似的 ts 报错:Type 'Timer' is not assignable to type 'number',这是因为 node typings

    It seems like you are using node typings which override setInterval() as something that returns NodeJS.Timer. If you’re running in the browser, it doesn’t make a whole lot of sense to use these,

    结论

    我们可以通过 程序化的事件侦听器 来监听销毁我们创建的任何代码示例
    除了 setTimeout 和 setInterval ,通常还有一些第三方库的对象示例,如 timePicker,datePicker,echarts图表等。

    mounted: function () {
    	// Pikaday 是一个第三方日期选择器的库
      	var picker = new Pikaday({
        	field: this.$refs.input,
        	format: 'YYYY-MM-DD'
      	})
    	// 在组件被销毁之前,也销毁这个日期选择器。
      	this.$once('hook:beforeDestroy', function () {
        	picker.destroy()
      	})
    }
    
    展开全文
  • 我们在使用vue的脚手架去搭建开发环境的时候,在A页面写入一个定时器去定时请求一个接口,但是我们去B页面,C页面的时候都会有这个接口定时请求的现象,那么怎样处理呢? 第一步: 首先我在data函数里面进行定义...
  • 主要介绍了Vue清除定时器setInterval优化方案分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vuesetInterval的清除

    千次阅读 2019-06-12 16:30:00
    两种清除setInterval的方式: 方案一: data() { return { timer: null // 定时器名称 } }, mouted() { this.timer = (() => { ...

    两种清除setInterval的方式:

    方案一:

    data() {            
        return {                              
            timer: null  // 定时器名称          
        }        
    },
    mouted() {
        this.timer = (() => {
        // 某些操作
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer);        
        this.timer = null;
    }

    方案二(官方推荐):通过$once事件侦听器器在定义完定时器之后的位置来清除定时器。

    方案一有两个潜在的问题:

    • 它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
    • 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化地清理我们建立的所有东西。
    mounted() {
        const timer = setInterval(() =>{                    
        // 某些定时器操作                
        }, 500);            
        // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
        this.$once('hook:beforeDestroy', () => {            
            clearInterval(timer);                                    
        })
    }

     

    转载于:https://www.cnblogs.com/momo798/p/11010478.html

    展开全文
  • vue中定时器setInterval使用

    万次阅读 2019-06-05 17:26:55
    自己在项目中使用setInterval,由于不正确的使用,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于定时器的用法及注意事项 声明 mouted() { this.timer = setInterval(()=>{ // 要...

    深坑

    自己在项目中使用setInterval,由于不正确的使用,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于定时器的用法及注意事项

    声明

        mouted() {
        	this.timer = setInterval(()=>{
        	// 要执行的函数
        	})
        }
    

    销毁

    destoryed() {
    	this.clearInterval(this.timer)
    }
    

    看起来是很简单也没有什么,但是坑来了,实际项目中使用

    在这里插入图片描述

        addSetInterval() {
          const that = this
          this.positionTimer = setInterval(() => {
            if (that.resultArr.length < that.times) {
              clearInterval(that.positionTimer)
              that.positionTimer = null
              console.log(that.times)
            } else {
              // 分批部署基站
              if (that.times < that.resultArr.length) {
                that.deployBaseStation()
                console.log('渲染数组的第' + that.times + '项')
              }
              that.times++
            }
            console.log(1111111111111)
          }, 500)
        },
    

    由于这里定义了定时器,箭头函数内部和外部的作用域不同了,要定义一个变量来使函数内部使用vue数据的时候指向不出错,

    that 是指vue , this是指定时器 positionTimer

    之前为了确认定时器已经停止了,在destory中和定时器中都输出了定时器的值,即 console.log(this.positionTimer),然而,上图

    在这里插入图片描述

    离开当前路由,再回到当前路由,之后控制台打印

    在这里插入图片描述

    然后不久之后就是

    在这里插入图片描述

    WTF???

    在请教了同学之后,她说可能跟我打印定时器也有关系,输出的时候调用了定时器,导致定时器关闭失败,我也是真的无奈了,一开始也没有定义额外的变量来确定this的指向,具体原因不明,总之,在不输出定时器,改加了额外的变量之后,定时器停止了,最终代码如下:

      destroyed() {
        clearInterval(this.positionTimer)// 清除定时器
        this.positionTimer = null
        // 离开路由之后断开websocket连接
        this.webSocketOnClose()
        this.websocketclose()
      },
      methods: {
        // 添加定时器
        addSetInterval() {
          const that = this  // 声明一个变量指向vue实例this,保证作用域一致
          this.positionTimer = setInterval(() => {
            if (that.resultArr.length < that.times) {
              clearInterval(that.positionTimer)
              that.positionTimer = null
              console.log(that.times)
            } else {
              // 分批部署基站
              if (that.times < that.resultArr.length) {
                that.deployBaseStation()
                console.log('渲染数组的第' + that.times + '项')
              }
              that.times++
            }
            console.log(1111111111111)
          }, 500)
        },
    
    展开全文
  • vue setInterval 遇坑指南 及解决方案

    千次阅读 2020-11-27 17:06:23
    vue setInterval 遇坑指南 及解决方案 好久没更新过博客了,最近小编遇到了一个经典的vue bug , 这里就把这个脱坑指南,给大家分享一下,闲话不多说,上代码! mounted() { this.timer = setInterval(() => { ...

    vue setInterval 遇坑指南 及解决方案

    好久没更新过博客了,最近小编遇到了一个经典的vue bug , 这里就把这个脱坑指南,给大家分享一下,闲话不多说,上代码!

      mounted() {
                this.timer = setInterval(() => {
                    this.timeout_ = this.timeout_ - 1
                    this.percent = (this.timeout_ / this.timeout) * 100
                    log.info('this.timeout_',this.timeout_)
                    if (this.timeout_ < 1) {
                             clearInterval(this.timer)
                             this.$emit('return-hom')   //  往上透一个事件 用来进行 倒计时结束   
                    }
                }, 1000)
            },
    
       beforeDestroy() {
                clearInterval(this.timer)
            }     
    

    情况是这样的 我这里有个结合倒计时做的进度条,要在倒计时结束清除掉这个倒计时,并且跳转到指定页面。之前这个代码是写好在另外一个组件的 能正常使用, 我直接复制到另外一个新的组件里面用,结果发现这个 定时器并不能销毁掉。我就在之前那个组件去试 发现却可以准确销毁, 哪怕粘贴到浏览器console 里面去调试 也是正常的,就是不能放到这个新的组件里面。

    解决思路:

    起初怀疑这个this.timer 并不是一个全局变量,所以在beforeDestroy 钩子函数里面,并未找到这个定时器,所以导致清除失败(注:一般清除不掉,大多都是这个原因);直到在 data 里面定义过这个变量,这里重新赋值(注意除了这里赋值,其他地方不要去修改这个值,否则也会造成开启之后清除不了)。

    最后还是不能成功。

    第二种解法:使用全局变量

     window.timer = setInterval(() => {
            console.log(window.timer);
    
          }, 1000);
    
    destroyed() {
          clearInterval(window.timer);
        },
    

    结果: 任然解决不掉。

    第三种解法:

          const timer = setInterval(() => {
            console.log(timer);
          }, 1000);
    
          this.$once('hook:beforeDestroy', () => {
            clearInterval(timer);
          })
    

    结果: 清除不掉

    最终解法:

        this.timer =  window.setInterval(() => {
            this.timeout_ = this.timeout_ - 1
            this.percent = (this.timeout_ / this.timeout) * 100
            if (this.timeout_ < 1) {
              window.clearInterval(this.timer)
              // this.timer = null;
              vEvents.$emit('got-home')  
            }
        }, 1000)
    

    解决猜测:我们都知道,这个试vue里面经典的坑,基本上都会遇到。上面的各种解题方法并不是说不管用,只是在这里小编应该是挂载的时候把这个计时器挂载到vue实例上了,而清除的时候 没等找到vue 上面的这个 计时器,就在其他地方找到了this.timer这个值,所以clearInterval(this.timer) 这行代码,并没有准确的清除掉我创建的这个计时器。 我这里把它直接挂载到window 这个最底层的实例上,清除又指定从这里清除。 所以能精确的清除掉这个计时器。

    展开全文
  • vue组件中,this指向实例,【实例中重写了setInterval等一整套方法】。所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回【定时器对象】,当然该...
  • vue中,使用setInterval()方法

    万次阅读 2018-01-05 10:48:09
    mounted() {  this.getElevatorList();  setInterval(this.getElevatorList, 15000);...在mounted()函数里边使用setInterval(), getElevatorList()这个方法在methods里边写,在mounted钩子函数里边
  • 主要介绍了VUE中setTimeout和setInterval自动销毁案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue setInterval 定时器失效

    千次阅读 2018-10-23 17:36:26
    正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave ...
  • vue 组件中的setInterval方法和window的不同 vue组件中,this指向实例,【实例中重写了setInterval等一整套方法】。所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个...
  • Vue中如下使用,clearInterval()是不会起作用的。 created () { setInterval(this.ReckonTime,5000); }, destroyed () { clearInterval(this.ReckonTime); }, methods: { ReckonTime(){ console.log('执行...
  • vue中setTimeout和setInterval下的console和alert可以执行但是和this有关的不能执行 console两个this的结果(按顺序) 可以看出两个this的指向不同,因为setTimeout和setInterval这两个函数是window对象的...
  • 主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
  • 问题的原因: setTimeout或setInterval执行时this变为了window,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,js的定时器执行时this指向的是window对象,而不再是data中的数据。...
  • 本人前端菜鸟,在项目中由于没有用websocket,所以要定时调用后台接口获取数据所以用到了setInterval定时器,在离开页面的时候浏览器不会自动清除定时器,然后再回到这个页面的时候又会执行一个定时器,这样会导致...
  • vue setInterval启动与停止 data () { return { otimer:null, } }, mounted () { this.otimer = setInterval(() => { //逻辑 }, 6000); this.$once('hook:beforeDestroy', () => {//页面关闭 console....
  • vue页面的定时刷新setInterval()

    千次阅读 2020-03-27 10:45:30
    setInterval() 方法可按照指定的周期(以毫秒计)不停地调用函数或表达式,直到clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 提示:如果你只想执行一次...
  • # 问题情景 今天上午,在统计博客运行时间的时候,需要持续调用...需要在vue里面,当然和jq大法,不太一样了 # 问题解决 mounted() { this.getElevatorList(); setInterval(this.getElevatorList, 15000); } ...
  • 最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,...接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法,感兴趣的朋友一起看看吧
  • vue中使用定时器setInterval

    千次阅读 2021-01-07 17:20:23
    vue中使用定时器setInterval this.timer=setInterval(this.fetchData,1000); clearInterval(this.timer); beforeDestroy(){ clearInterval(this.timer); },
  • 刚学习vue不久,下午做vue轮播小组件时遇到了mouted与methods中方法互相调用的问题. mouted调用methods中方法 mounted: function() { this.up(); } 在mouted中使用setInterval调用methods中方法 mounted() {...
  • 结果是不用setInterval的情况下,可以更新成功。 在setInterval里写方法,数据更新了,但页面样式没有更新。 代码和结果图如下: html ![图片说明]...
  • 1、在vue中,有两套定时器,一套是浏览器API,window对象上的;另一套就是vue/nodejs封装的,需要引入 (之前一直不知道,一直清不掉计时器,坑惨了) import { setInterval, clearInterval } from 'timers' 如果只...
  • 主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,640
精华内容 6,256
关键字:

setintervalvue

vue 订阅