uni-app setInterval定时器无法被clearTimeout清除
uni-app setInterval定时器无法被clearTimeout清除
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win11 | HBuilderX |
示例代码：
export default {
data() {
return {
title: 'Hello',
isStartAttendTimer: ''
}
},
onLoad() {
this.isStartAttendTimer = setInterval(() => {
console.log("执行定时器")
console.log(this.isStartAttendTimer)
}, 1000);
},
methods: {
clickTimer() {
console.log("清除定时器")
clearTimeout(this.isStartAttendTimer)
}
}
}操作步骤：
export default {
data() {
return {
title: 'Hello',
isStartAttendTimer: ''
}
},
onLoad() {
this.isStartAttendTimer = setInterval(() => {
console.log("执行定时器")
console.log(this.isStartAttendTimer)
}, 1000);
},
methods: {
clickTimer() {
console.log("清除定时器")
clearTimeout(this.isStartAttendTimer)
}
}
}预期结果：
清除定时器实际结果：
16:36:47.035 执行定时器 at pages/index/index.vue:21
16:36:47.038 12 at pages/index/index.vue:22
16:36:48.033 执行定时器 at pages/index/index.vue:21
16:36:48.037 12 at pages/index/index.vue:22
16:36:48.587 清除定时器 at pages/index/index.vue:29
16:36:49.030 执行定时器 at pages/index/index.vue:21
16:36:49.033 12 at pages/index/index.vue:22
16:36:50.038 执行定时器 at pages/index/index.vue:21
16:36:50.041 12 at pages/index/index.vue:22
16:36:50.895 清除定时器 at pages/index/index.vue:29
16:36:51.026 清除定时器 at pages/index/index.vue:29
16:36:51.034 执行定时器 at pages/index/index.vue:21
16:36:51.034 12 at pages/index/index.vue:22
16:36:51.228 清除定时器 at pages/index/index.vue:29
16:36:51.389 清除定时器 at pages/index/index.vue:29
16:36:51.543 清除定时器 at pages/index/index.vue:29
16:36:51.724 清除定时器 at pages/index/index.vue:29
16:36:51.947 清除定时器 at pages/index/index.vue:29
16:36:52.035 执行定时器 at pages/index/index.vue:21
16:36:52.039 12 at pages/index/index.vue:22bug描述：
setInterval定时器无法被clearTimeout清除 在mumu模拟器 /mete40真机调试都不无法被清除 在浏览器可以清除
2 回复
写错了吧！
你用的是setInterval不应该使用clearInterval来清除定时器吗？
setInterval ==> clearInterval
setTimeout ==> clearTimeout
在 uni-app 中使用 setInterval 和 clearInterval 时，如果发现定时器无法被清除，通常是因为以下几个原因：
1. 定时器变量作用域问题
确保你存储定时器 ID 的变量在需要清除定时器时仍然可访问。如果定时器 ID 存储在局部变量中，可能在需要清除定时器时已经超出了作用域。
错误示例：
function startTimer() {
let timer = setInterval(() => {
console.log('Timer running');
}, 1000);
}
function stopTimer() {
clearInterval(timer); // 这里会报错，因为 timer 是局部变量
}正确示例：
let timer = null;
function startTimer() {
timer = setInterval(() => {
console.log('Timer running');
}, 1000);
}
function stopTimer() {
if (timer) {
clearInterval(timer);
timer = null; // 清除后重置为 null
}
}2. 定时器 ID 被覆盖
如果你在多个地方使用 setInterval，并且将定时器 ID 存储在同一个变量中，可能会导致之前的定时器 ID 被覆盖，从而无法清除。
错误示例：
let timer = null;
function startTimer1() {
timer = setInterval(() => {
console.log('Timer 1 running');
}, 1000);
}
function startTimer2() {
timer = setInterval(() => {
console.log('Timer 2 running');
}, 1000);
}
function stopTimer() {
clearInterval(timer); // 只能清除最后一个定时器
}正确示例：
let timer1 = null;
let timer2 = null;
function startTimer1() {
timer1 = setInterval(() => {
console.log('Timer 1 running');
}, 1000);
}
function startTimer2() {
timer2 = setInterval(() => {
console.log('Timer 2 running');
}, 1000);
}
function stopTimer1() {
if (timer1) {
clearInterval(timer1);
timer1 = null;
}
}
function stopTimer2() {
if (timer2) {
clearInterval(timer2);
timer2 = null;
}
}3. 使用 clearTimeout 而不是 clearInterval
setInterval 和 setTimeout 返回的定时器 ID 是不同的，setInterval 应该使用 clearInterval 来清除，而不是 clearTimeout。
错误示例：
let timer = setInterval(() => {
console.log('Timer running');
}, 1000);
clearTimeout(timer); // 错误，应该使用 clearInterval正确示例：
let timer = setInterval(() => {
console.log('Timer running');
}, 1000);
clearInterval(timer); // 正确4. 定时器已经被清除
如果你尝试清除一个已经被清除的定时器，clearInterval 不会报错，但也不会做任何事情。确保你只在定时器存在时尝试清除它。
示例：
let timer = setInterval(() => {
console.log('Timer running');
}, 1000);
clearInterval(timer);
clearInterval(timer); // 第二次调用不会报错，但也不会做任何事情5. 异步操作导致的问题
如果你在异步操作中设置或清除定时器，确保异步操作完成时定时器 ID 仍然有效。
示例：
let timer = null;
setTimeout(() => {
timer = setInterval(() => {
console.log('Timer running');
}, 1000);
}, 2000);
setTimeout(() => {
if (timer) {
clearInterval(timer);
timer = null;
}
}, 5000);