clearTimeout 函数

1、基本介绍

• clearTimeout 函数用于取消先前通过 setTimeout 函数设置的定时器

clearTimeout(【timeoutID】)

参数	说明
timeoutID	要取消的定时器的标识符，这个 ID 是由 setTimeout 函数返回的

2、演示

let timeoutId1 = setTimeout(() => {console.log("这段代码不会执行");
}, 1000);let timeoutId2 = setTimeout(() => {console.log("这段代码会执行");
}, 1000);clearTimeout(timeoutId1);

# 输出结果这段代码会执行

3、注意事项

1. 如果定时器已经触发，调用 clearTimeout 函数不会有任何效果

let timeoutId1 = setTimeout(() => {console.log("定时器 1 执行了");
}, 1000);let timeoutId2 = setTimeout(() => {console.log("取消定时器 1");clearTimeout(timeoutId1);
}, 2000);

# 输出结果定时器 1 执行了
取消定时器 1

2. 如果定时器已经取消，调用 clearTimeout 函数不会有任何效果

let timeoutId1 = setTimeout(() => {console.log("这段代码不会执行");
}, 1000);let timeoutId2 = setTimeout(() => {console.log("这段代码会执行");
}, 1000);clearTimeout(timeoutId1);
clearTimeout(timeoutId1);

# 输出结果这段代码会执行

3. 传入无效的 ID 不会报错，也不会有任何效果

clearTimeout(null);
clearTimeout(undefined);
clearTimeout("");
clearTimeout(0);
clearTimeout(123);
clearTimeout(NaN);
clearTimeout(false);

4. setTimeout 函数与 setInterval 函数共享同一个 ID 池，在技术上可以混用 clearTimeout 函数和 clearInterval 函数，但是，为了清楚起见，应该避免这样做

let id = setInterval(() => {console.log("定时器执行了");
}, 1000);setTimeout(() => {console.log("取消定时器");clearTimeout(id);
}, 5000);

# 输出结果定时器执行了
定时器执行了
定时器执行了
定时器执行了
定时器执行了
取消定时器

---

clearInterval 函数

1、基本介绍

• clearInterval 函数用于取消先前通过 setInterval 函数设置的定时器

clearInterval(【intervalID】)

参数	说明
intervalID	要取消的定时器的标识符，这个 ID 是由 setInterval 函数返回的

2、演示

let counter = 0;let intervalId = setInterval(() => {counter++;console.log(`计数: ${counter}`);if (counter >= 5) {clearInterval(intervalId);console.log("定时器已停止");}
}, 1000);

# 输出结果计数: 1
计数: 2
计数: 3
计数: 4
计数: 5
定时器已停止

3、注意事项

1. 如果定时器已经取消，调用 clearInterval 函数不会有任何效果

let counter = 0;let intervalId = setInterval(() => {counter++;console.log(`计数: ${counter}`);
}, 1000);setTimeout(() => {console.log("取消定时器");clearInterval(intervalId);clearInterval(intervalId);
}, 5000);

# 输出结果计数: 1
计数: 2
计数: 3
计数: 4
计数: 5
取消定时器

2. 传入无效的 ID 不会报错，也不会有任何效果

clearInterval(null);
clearInterval(undefined);
clearInterval("");
clearInterval(0);
clearInterval(123);
clearInterval(NaN);
clearInterval(false);

3. setTimeout 函数与 setInterval 函数共享同一个 ID 池，在技术上可以混用 clearTimeout 函数和 clearInterval 函数，但是，为了清楚起见，应该避免这样做

let timeoutId1 = setTimeout(() => {console.log("这段代码不会执行");
}, 1000);let timeoutId2 = setTimeout(() => {console.log("这段代码会执行");
}, 1000);clearInterval(timeoutId1);

# 输出结果这段代码会执行