jquery - jQuery延迟函数中断

Question

我在 jQuery 中有一个淡入淡出的弹出窗口，如果不被用户关闭，它将在 10 秒内淡出。

我有代码：

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

这适用于淡入、延迟和淡出 - 但'close'表单上的按钮直到超时后才起作用！

我需要'close'按钮来中断delay，以便用户可以阅读弹出窗口并自己关闭它，比如 5 秒 - 然后如果他们自己没有关闭它，那么它将在 10 秒延迟后自动关闭。

任何想法如何做到这一点？

Answer 1

您可以使用该.clearQueue()方法。

在您的关闭处理程序中，您可以这样做：

$modalEleement.clearQueue();

默认情况下，两者都对队列.delay()进行操作，但您可以传递自定义队列名称。.clearQueue()fx

Answer 2

只需在带有出队的关闭按钮上添加一个单击事件。

例如：

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

$modalElement.find('a.close').click(function(){
  // If you want fadeout being triggerd
  $modalElement.dequeue() 
  // If you just want to delete the box without the fadeOut
  $modalElement.remove() 
});