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

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

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

在函数定义中声明的变量是本地的。每次执行函数时都会创建和销毁它，并且函数外的任何代码都无法访问。

以下是Mozilla Developer Network的文档

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 2

使用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 3

简单解决这个问题。我已经硬编码了小时，分钟和秒的值，但是你总是可以从所需的位置获取它们

var totalTime;

 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将其声明为全局变量，以便外部函数可以访问它。

clearTimeout（）没有停止setTimeout

4 个答案: