vue项目使用定时器每隔几秒运行一次某方法代码实例
作者：胆大王-
有时候在项目中我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现,下面这篇文章主要给大家介绍了关于vue项目使用定时器每隔几秒运行一次某方法的相关资料,需要的朋友可以参考下
代码如下：
data() {
return {
timer:null, //定时器名称
}
}，
created() {
this.setTime();
},
beforeDestroy(){
clearInterval(this.timer); // 清除定时器
this.timer = null;
},
methods: {
setTime(){
//每隔一分钟运行一次保存方法
this.timer = setInterval(()=>{
this.saveList();
},60000)
},
saveList(){
}
}上面这样写已经实现功能，关闭页面不会继续执行。长时间运行页面也没有卡死。
有人说，setInterval（）里面嵌套setTimeout（）
setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。 其原因与JS引擎线程有关（需深入研究JS引擎线程） ，但是setTimeout是自带清除定时器的。 我没有出现页面卡死的情况所以就没加setTimeout。
setInterval(() => {
setTimeout(() => {
this.queryChartTime()
}, 0)
}, 10000)setInterval（）和setTimeout（）的区别：
一个是循环执行setInterval，另一个是定时执行setTimeout
1:setInterval 循环执行， 每隔一段时间执行一次， 多次执行。
2:setTimeout 到时间后执行， 只执行一次。
在beforeDestroy()生命周期内清除定时器
定时器需要在页面销毁的时候清除掉，不然会一直存在！！
补充知识：定时执行 （ setTimeout）
定时执行 setTimeout 是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是不再运行；
语法：
setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1, param2, ... 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。
eg:
开始时候创建一个定时器 setTimeout，只在2秒后执行一次方法。
let timer = setTimeout(() => {
//需要定时执行的代码
console.debug("Hello World");
}, 2000)总结
到此这篇关于vue项目使用定时器每隔几秒运行一次某方法的文章就介绍到这了,更多相关vue定时器每隔几秒运行一次内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！