分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Vue清除所有JS定时器

发布时间:2023-09-06 02:08责任编辑:彭小芳关键词:定时器

Vue清除所有JS定时器

在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器

JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器

在vue项目中可以使用路由守卫的 beforeEach方法,来进行清除功能

首先,声明一个全局变量数组,把所有的定时器的返回值放到数组中,
(因为定时器返回的值会随着调用次数的增加而增加,所以无法确定的去判断返回值具体是多少,只有接收这个返回值,然后进行操作。)
然后在每次要跳转进入新页面的时候,通过beforeEach方法,把旧页面的定时器全部清除

//声明数组,接收定时器的返回值
const timerCount = [];

//设置定时器

timerCount[0] = setInterval(function () {
    //....
},1000)

timerCount[1] = setInterval(function () {
    //....
},1000)


//入口文件
router.beforeEach((to, from, next) => {
    for(let i = 0; i <= timerCount.length; i++){
        clearInterval(timerCount[i]);
    }
    timerCount.splice(0, timerCount.length)
    next()
})
//使用clearInterval(i)可以清除指定的定时器,其中参数i是定时器的返回值
//这里每次都把数组清除了,当然,不清楚也没有什么影响

这样,页面所有的定时器,就全部清除了

Vue清除所有JS定时器

原文地址:https://www.cnblogs.com/fannn/p/9435617.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved