Javascript 取消/停止超时功能

我有一些javascipt（jQuery），当点击一个按钮时，我会淡入#myDiv，然后使用超时函数在5秒钟后再次淡出。它工作得很好，但是如果用户在我的超时内的淡出功能运行之前再次单击该按钮，我需要超时停止，并基本上重新开始

我想答案应该是先运行一个函数来清除超时，尽管我不能让它工作

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

  //need function here to stop the timeout if running

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

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

});

---

如果已设置超时，则必须清除超时：

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（）

函数删除超时，因此，如果用户在按钮上单击两次，第一个超时将被删除，并且仅执行第二个实例。

如果已设置超时，则必须清除超时：

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（）

函数删除超时，因此，如果用户在按钮上单击两次，第一个超时将被删除，而只有第二个实例将被执行。

您可以单独使用内置jQuery API方法执行此操作：

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

使事情更容易阅读

参考资料：

---

您可以单独使用内置的jQuery API方法来实现这一点：

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

使事情更容易阅读

参考资料：

---

看看这篇文章，找到你的答案。感谢这个链接--我做了大量的研究，发现不仅仅是这个链接处理了停止超时，但是我不知道如何在将超时存储在变量中之后实际运行超时，因此，我发布了这个问题，希望找到一个完整的解决方案，即如何将超时存储为变量，以及如何在本文中运行TimeoutLook来找到答案。感谢这个链接--我做了很多研究，发现不仅仅是这个链接处理了停止超时，但是我不知道在将超时存储在变量中之后如何实际运行超时，所以我发布了这个问题，希望找到一个完整的解决方案，即如何将超时存储为变量以及如何运行超时