我對setTimeout / clearTimeout有問題

Question

我有以下js

 document.addEventListener("DOMContentLoaded", function() { document.querySelector("#pageRedirect").addEventListener("change", changeHandler); }); function changeHandler() { var timer; if (pageRedirect.checked) { timer = setTimeout(function() { window.location.href = 'http://www.google.com'; }, 3000); console.log(pageRedirect.checked); } else { //dont redirect clearTimeout(timer); console.log(pageRedirect.checked); } } 

 <input type="checkbox" id="pageRedirect" name="pageRedirect" /> 

取消選中復選框時，我不重定向，但確實如此。 我的錯在哪里？

謝謝。

Answer 1

問題是計時器ID的變量聲明的位置。 它在函數內部，因此當您嘗試清除它時，沒有在setTimeout分配的ID。 您需要將聲明移出函數之外，以便可以在調用之間保留計時器的句柄：

var timer;
function changeHandler(){
    // etc

clearTimeout 的規范進一步說明了這一點：

如果handle未在調用該方法的WindowTimers對象的活動超時列表中標識一個條目，則該方法不執行任何操作。

IE會默默地忽略任何無效的計時器句柄，在您的情況下這些計時器句柄將是undefined 。

Answer 2

問題在於，每次函數執行時都會重新聲明timer變量，因此，即使有閉包，viariable也無法保存定時器。

您可以將計時器存儲在其他位置，例如在節點中。 請注意，在以下代碼片段中，我將計時器存儲在this.timer

 document.addEventListener("DOMContentLoaded", function () { document.querySelector("#pageRedirect").addEventListener("change", changeHandler); }); function changeHandler(){ if(pageRedirect.checked){ this.timer = setTimeout(function(){ document.getElementById('output').innerHTML = "done"; }, 3000); } else { //dont redirect clearTimeout(this.timer); } } 

 <input type="checkbox" id="pageRedirect" name="pageRedirect"/> <div id="output"></div>