javascript - 取消/停止超时功能

Question

我有一些 javascipt (jQuery)，其中单击按钮时会淡入 #myDiv，然后使用超时函数在 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() 函数删除超时，因此如果用户单击按钮两次，则第一个超时将被删除，并且只会执行第二个实例。