javascript - 停止当前 Javascript 事件

Question

我有一个简单的 JQuery 待办事项列表。当我删除或添加项目时，将显示一 strip 有淡入、淡出和延迟 JQuery 方法的消息。

整个应用程序运行良好，除了当我有很多项目并且我想快速删除很多项目时，该消息仍然会继续一一显示。

我尝试 e.stopPropagation() 来停止上一个事件，但似乎不起作用。

function clearMesg() {            
     $(".mesg").stop().fadeIn(500).delay(500).fadeOut(500);
}

$(".del").on("click", function (e) {
      e.stopPropagation();

      $(this).parent().remove();

      $('.mesg').text("Deleted.");
      clearMesg();

});

Answer 1

您不需要停止之前的事件；在 JavaScript 中，事件会排队并一个接一个地运行，因此最后一个事件处理程序将在当前事件处理程序运行之前完成。另一方面，您使用 jQuery 运行的动画是异步运行的，因此其他事件处理程序将在动画进行时运行，从而导致动画重新启动。

您可以使用 jQuery 的 :animated 选择器检查一个动画是否已经在运行，然后再启动另一个动画(请参阅 "How do I find out with jQuery if an element is being animated?" ):

function clearMesg() {
     let $mesg = $(".mesg");
     if (!$mesg.is(":animated")) {
          $(".mesg").stop().fadeIn(500).delay(500).fadeOut(500);
     }
}