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);

# 輸出結果這段代碼會執行