javascript - clearTimeout() 无法正常工作

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 只有最后启动的计时器的 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);
});