关闭页面强制清除所有循环定时器
背景:
关闭页面强制清除所有循环定时器。在关闭页面的生命周期函数中,清除循环定时器。
如果只有一个循环定时器,使用clearInterval(timeInterval定时器名称),如下:
- 首先,为每个定时器创建一个变量,并使用setInterval()函数将定时器赋值给变量。
- 其次,当你想停止定时器时,使用clearInterval()函数并传入相应的定时器变量作为参数。这将停止该定时器的执行。
通过这种方式,我们可以轻松地清除我们已经记录的定时器。然而,在实际的项目中,定时器的管理可能会变得更加复杂。
如果有多个循环定时器,使用for循环清除,如下:
- 首先,创建一个数组来存储所有的定时器标识符(ID)。
- 其次,使用setInterval()函数创建定时器时,将每个定时器的ID存储到数组中。
- 最后,使用循环遍历数组,并使用clearInterval()函数来清除每个定时器。
- 这种方法的关键是确保所有的定时器 ID 都被记录在
timers
数组中,便于之后统一清理。timeIntervalArr.forEach((item) => {
clearInterval(item);
})
暴力清除所有循环定时器,如下:
- 有时候,我们可能并不知道页面上所有的定时器 ID。这种情况下,可以使用递归的方式清理所有的定时器。
- 这个方法利用了 JavaScript 的定时器 ID 是递增的特性。通过设置一个无操作的定时器来获取当前最大的定时器 ID,然后递增这个 ID 来清除所有的定时器。
for (let i = 1; i < 1000; i++) {
clearInterval(i);
}
核心代码:
onBeforeUnmount(() => {timeInterval && clearInterval(timeInterval);for (let i = 1; i < 1000; i++) {clearInterval(i);}timeIntervalArr.forEach((item) => {clearInterval(item);})
});
创建循环定时器的代码:
let timeIntervalArr = [];
let timerIDS = [];
const handleNodeClick = (val) => {console.log('选择摄像头>>>', val);const isOk = timerIDS.includes(val.pid);if (val.type === 100) {if (isOk) {//存在,清除這個定時器clearInterval(timeIntervalArr[val.pid]);timerIDS = timerIDS.filter(item => item !== val.pid);return}timeIntervalArr[val.pid] = setInterval(() => {getTextWdIfone(val, wid);//调接口}, 10 * 1000)timerIDS.push(val.pid);} else {if (aWindow.value === 1) {for (let i = 1; i < 1000; i++) {clearInterval(i);}}}
};
写到这儿。。。实际项目中,根据情况调用清除定时器的方法。