我对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>