Question

我有以下js

＆＃13;

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

＆＃13;

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

＆＃13;

当复选框取消选中时，我不会重定向，但确实如此。哪里有我的错？

感谢。

Answer 1

问题是计时器ID的变量声明的位置。它位于您的函数内部，因此当您尝试清除它时，它没有获得您在setTimeout中指定的ID。您需要在函数之外移动声明，以便它可以在调用之间保持计时器的句柄：

var timer;
function changeHandler(){
    // etc

clearTimeout为undefined加上了这一点，其中说：

如果handle没有识别调用该方法的WindowTimers对象的活动超时列表中的条目，则该方法不执行任何操作。

即。它将默默地忽略任何无效的计时器句柄，在您的情况下将是[3,5]。

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>

我有setTimeout / clearTimeout的问题

2 个答案: