取消/停止超时函数

Question

当用户点击按钮时，我有一些JavaScript（jQuery）代码，它会淡入#myDiv，然后通过使用Timeout函数在5秒后再次淡出。它可以正常工作，但如果用户在超时函数内的fadeOut函数运行之前再次点击按钮，则需要停止超时并重新开始。

我认为答案是首先运行一个函数来清除超时，尽管我无法使其起作用。

$('button').on('click', function() {

  //need function here to stop the timeout if running

  $("#myDiv").fadeIn(slow);

  setTimeout(function(){
    $("#myDiv").fadeOut(slow);
  }, 5000);

});

- scmccarthy22

---

看这篇帖子找到你的答案。https://dev59.com/rnE85IYBdhLWcg3w2Hbs - undefined

感谢提供的链接 - 我进行了大量的研究，并找到了不仅仅是这个链接所涉及的停止超时的方法，但我无法弄清楚如何在将其存储为变量后实际运行超时，因此我发布了这个问题，希望能找到一个完整的解决方案，即如何将超时存储为变量并如何运行超时。 - undefined

Answer 1

如果已经设置了超时，您必须清除它：

var to = null;
$('button').on('click', function() {

  if(to){
     clearTimeout(to);
  }
  //need function here to stop the timeout if running

  $("#myDiv").fadeIn(slow);

  to = setTimeout(function(){
    $("#myDiv").fadeOut(slow);
  }, 5000);

});

clearTimeout()函数可以删除超时，因此如果用户在按钮上点击两次，则第一个超时将被删除，只有第二个实例将被执行。

- conventi

Answer 2

你可以仅使用内置的jQuery API方法来完成此操作：

$('button').on('click', function() { 
  $("#myDiv")
        .stop(true,true) // resets current animation queue
        .fadeIn('slow')
        .delay(5000)// delays anything in queue
        .fadeOut('slow');
});

使阅读变得更容易

参考资料:

• stop()

• delay()

演示

- charlietfl