Question

以下是此问题的JSFiddle示例。

当我点击按钮时，所有内容都会按预期消失，并在3秒内返回或直至被拒绝。但是，如果我不等待3秒但是提前点击它，然后快速点击它返回的按钮不到3秒钟。

编辑：对问题的更好解释：在JSFiddle中，单击绿色按钮，单击空白区域以停止淡入淡出，然后再次单击绿色按钮（这一切都必须快速完成）。这些元素过快地消失了。

感谢Katana314

var waiting;

function startNext() {
  $(document).off('click');
  window.clearTimeout(waiting);
  $('#correctT, #correctP').fadeOut('fast', function() {
    $('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeIn('slow');


  })

}
$('#button1, #button2, #button3, #button4').click(function(e) {


  $('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeOut('fast', function() {


    $('#button1, #button2, #button3, #button4, #title, #image, #ame').hide();
    $('#correctT, #correctP').fadeIn('fast');

    $(document).click(startNext);

    waiting = setTimeout(startNext, 2500);
  });
});

Answer 1

问题的根源在于：

$('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeOut('fast', function() {


    $('#button1, #button2, #button3, #button4, #title, #image, #ame').hide();
    $('#correctT, #correctP').fadeIn('fast');

    $(document).click(startNext);

    waiting = setTimeout(startNext, 2500);
    console.log("started timer:" + waiting );
});

如果你运行它并查看你的控制台你看到了什么？你看，你开始的不是一个，而是7个计时器。您的fadeOut处理程序将为每个元素调用。因此，您启动了7个计时器，但waiting只启动了 last 计时器的ID。所以其他6个仍在运行。罗伯特上面的回答通过不启动另一个计时器来避免这个问题，如果一个计时器已经设置并且有效。更清洁的解决方案是等待所有动画完成。例如，请看这里：

jQuery wait till all page animations are done

所以这样的事情应该有效：

$('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeOut('fast').promise().done(function() {


    $('#button1, #button2, #button3, #button4, #title, #image, #ame').hide();
    $('#correctT, #correctP').fadeIn('fast');

    $(document).click(startNext);

    waiting = setTimeout(startNext, 2500);
    console.log("started timer:" + waiting);
});

Answer 2

https://jsfiddle.net/1dmjvon3/3/

照顾你的超时ID ......

if(waiting!==null){
    window.clearTimeout(waiting);
    waiting = null;
}

也

if(waiting===null) waiting = setTimeout(startNext, 2500);

更合适的解决方案是为选择器中的每个元素指定一个类名，并使用类名作为选择器，这样函数就不会触发七次。

这是另一个小提琴：https://jsfiddle.net/1dmjvon3/

clearTimeout（）无法正常工作

2 个答案: