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

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;

    // ...
}

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

相关：What is the function of the var keyword and when to use it (or omit it)?

Answer 2

您在函数内声明了您的 timer 变量，因此它的范围仅对该函数是本地的。不能在函数外调用。要解决此问题，请将变量移到函数之外。

在函数定义之外声明的变量是全局变量，它的值可以在整个程序中访问和修改。

在函数定义中声明的变量是局部变量。它在函数每次执行时被创建和销毁，并且不能被函数外的任何代码访问。

这是来自 Mozilla 开发者网络的文档

https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx

首先在任何函数之外声明timer 和total_time 变量，使其具有本地范围。

var timer;
var total_time;

现在，创建设置计时器的函数。请注意，我们希望使用 var 关键字将这些变量设置为范围内的本地变量。

function setTimer(){

    var hour = +(document.getElementById('h').value) * 3600000;
    var minute = +(document.getElementById('m').value) * 60000;
    var sec = +(document.getElementById('s').value) * 1000;

    totalTime = hour + minute + sec;    // Assign total time to variable
    alert("Time's up");
}

将定时器的值赋值给setTimeout。我们现在可以使用totalTime 变量作为时间量。

timer = setTimeout(setTimer, totalTime);

我们现在可以停止计时器，因为它已被赋予本地范围。

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

它现在应该可以工作了。再试一次。

Answer 3

对此的简单解决方案。我已经硬编码了小时、分钟和秒的值，但是您总是可以从所需的位置获取它们

var 总时间；

 function settimer(){

    hour = 0;
    minute = 0;
    sec = 2;

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

};

settimer();

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




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

Answer 4

您可以在函数外部提升 timer 或实例化 timer 而不用 var 声明它，使其成为全局变量，以便外部函数可以访问它。