Question

我有一个按下按钮时会调用的功能。我的目标是5秒钟后在控制台中打印“ hello”，如果在5秒钟的等待时间内按下按钮，则什么也没有。

问题是，如果我在等待5秒钟时按下按钮，则在控制台中我仍然会收到多个“ hello”。我在做什么错了？

这是Javascript代码：

function foo(){
    var block = false;
    if(!block){
        block = true;
        myVar = setTimeout(checkAgain, 5000);
    }
    function checkAgain(){
        console.log("hello");
        block = false;
    }
}

和HTML：

<button id="button" onClick="foo();">Click me!</button>

Answer 1

您无需手动处理“阻止”，只需使用clearTimeout取消通话即可。这对我来说似乎更自然-当您单击一次您说“在5秒钟内调用此函数”时，再单击一次时，您说“不要调用它”。

var timeout = null;
var button = document.querySelector("#btn");

button.onclick = function()
{
  if (timeout) 
  {
    clearTimeout(timeout);
    timeout = null;
  }
  else 
  {
    timeout = setTimeout(function() { 
      timeout = null;
      run();
    }, 1000); // should be 5000, just for test
  }
};

function run()
{  
  console.log("Hello world");
}

<input type="button" id="btn" value="Click me">

Answer 2

您没有采取任何措施来阻止后续通话。 block是foo内部的局部变量，因此每次调用foo都有一个不同的变量。

相反，您必须在block之外有foo：

var myVar;
var block = false;
function foo(){
    if(!block){
        block = true;
        myVar = setTimeout(checkAgain, 5000);
    }
    function checkAgain(){
        console.log("hello");
        block = false;
    }
}
document.getElementById("btn").addEventListener("click", foo);

<input type="button" id="btn" value="Click me">

这也意味着不必再为每次对checkAgain的调用而重新创建foo，因为它不再需要foo本地的任何内容：

var myVar;
var block = false;
function foo(){
    if(!block){
        block = true;
        myVar = setTimeout(checkAgain, 5000);
    }
}
function checkAgain(){
    console.log("hello");
    block = false;
}
document.getElementById("btn").addEventListener("click", foo);

<input type="button" id="btn" value="Click me">

（我认为所有这些都在作用域函数或模块中，因此它们不是全局变量。）

也就是说，该按钮将保持活动状态，从而给用户留下他/她可以单击它的印象。相反，您可以考虑让foo禁用并重新启用按钮。

Answer 3

这是因为您已经在函数“ foo”的范围内定义了变量“ block”，并且每次调用该函数时都会再次启动它。正确的实现是：

var block = false;

function foo(){
  if (!block) {
    block = true;
    myVar = setTimeout(checkAgain, 5000);
  }

  function checkAgain() {
    console.log("hello");
    block = false;
  }
}

setTimeout期间阻止函数执行

3 个答案: