javascript - 停止当前的Javascript事件

我在JQuery中有这个简单的待办事项清单。当我删除或添加项目时，将显示一条消息，其中包含淡入，淡出和延迟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();

});

最佳答案

您无需停止上一个事件；在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);
     }
}