Question

我有一些javascipt（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);

});

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()函数删除超时，因此如果用户在按钮上单击两次，则删除第一个超时，并且仅执行第二个实例。

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

使事情更容易阅读

参考文献：

的 DEMO

取消/停止超时功能

2 个答案: