Question

我在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();

});

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);
     }
}

停止当前的Javascript事件

1 个答案: