vue项目使用定时器每隔几秒运行一次某方法代码实例
更新时间：2023年04月28日 11:42:42 作者：胆大王-
有时候在项目中我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现,下面这篇文章主要给大家介绍了关于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定时器每隔几秒运行一次内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue实现网页首屏加载动画及页面内请求数据加载loading效果
Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下2023-02-02
本篇文章主要介绍了VUE中使用Vue-resource完成交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
下面小编就为大家分享一篇Vue.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue项目有时候需要根据页面需要动态的去修改页面标题名称，本文就来介绍一下，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
下面小编就为大家分享一篇解决Vue打包之后文件路径出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
解决在Vue中使用axios POST请求变成OPTIONS的问题
这篇文章主要介绍了解决在Vue中使用axios POST请求变成OPTIONS的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在我们生活中，二维码的应用越来越广泛，特别是在移动互联网的时代，二维码成为了快速传达信息的一种利器，本文我们就来看看如何在Vue框架下，实现一个具备扫描和查看数据的二维码吧2023-05-05
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要给大家介绍了关于Vue3中使用Pinia的相关资料,pinia是一个用于vue的状态管理库,类似于vuex,是vue的另一种状态管理工具,文中介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论