clearTimeout() 不停止 setTimeout

Question

我正在尝试用 Javascript 构建一个非常简单的计时器（基于 HTML 表单的输入），但我的 clearTimeout 不工作——甚至没有访问我拥有的 console.log。在我的 HTML 中，为了调用 clearTimeout，我只有 .我真的不确定为什么这不起作用 - 任何帮助将不胜感激！谢谢！

   function settimer(){

hour = document.getElementById('h').value;
minute = document.getElementById('m').value;
sec = document.getElementById('s').value;

hour = hour * 3600000;
minute = minute * 60000;
sec = sec * 1000;
totalTime = hour+minute+sec;

 var timer = setTimeout(function(){alert("Time's up"); }, totalTime);
 }

  function clear(){
    console.log("stopped")
    clearTimeout(timer);
  }

原文由 tx291 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当使用 var 时， timer 被声明为 settimer() 中的局部变量，并且仅存在于语句体内。

为了允许两个函数共享对它的访问，必须在它们之外声明该变量。 settimer() 仍然可以分配给它，但是 clear() 也可以访问它。

 // declare variable in surrounding scope
var timer;

function settimer() {
    // ...

    // assign to declared variable
    timer = setTimeout(function(){alert("Time's up"); }, totalTime);
}

function clear(){
    console.log("stopped")
    clearTimeout(timer);
}

---

注意：正在使用的其他变量，因为它们只在 settimer() 内部需要，所以应该声明为局部变量。

 function settimer() {
    var hour = document.getElementById('h').value;
    var minute = document.getElementById('m').value;
    var sec = document.getElementById('s').value;

    hour = hour * 3600000;
    minute = minute * 60000;
    sec = sec * 1000;

    var totalTime = hour+minute+sec;

    // ...
}

通过根本不真正声明它们，它们将自动成为全局变量。

相关： var 关键字的功能是什么以及何时使用它（或省略它）？

原文由 Jonathan Lonowski 发布，翻译遵循 CC BY-SA 3.0 许可协议