当未满足延迟时取消事件

Cancel event when delay was not met?

本文关键字：取消 事件 延迟 未满足      更新时间：2023-09-26

我需要能够根据元素悬停的时间取消事件。例如，当我将延迟设置为500毫秒时，当元素悬停的时间少于500毫秒时，应该取消事件，否则将触发事件。delay()和setTimeout()函数似乎无法做到这一点。

你可以尝试这样做，而不是使用jQuery的delay方法。

演示工作

var timeoutId = null;
$("selector").hover(function(){
   if(timeoutId)
      clearTimeout(timeoutId);
    timeoutId = setTimeout(function(){
        alert("do your stuff here");
    }, 5000); 
}, function(){
    clearTimeout(timeoutId);
});

有人可能会想出一些更干净的东西，但下面的代码将能够处理您的问题。它需要500毫秒的时间才能再次触发事件中的代码。也许可以清理它，使timer/delayMet不是潜在的全局变量。

我使用$('a').click作为示例选择器和事件。

var timer, 
    delayMet = true;
$('a').click(function () {
  if(delayMet === true) {
    // your code here
  }
  else {
    delayMet = false;
    setTimeout(function () {
      delayMet = true;
    }, 500);
  }
});

您可以通过以下操作取消setTimeout()。

var timer = setTimeout(function(){...},5000);
...
clearTimeout(timer);
jQuery .delay() docs:

.delay()方法最适合在排队的jQuery之间延迟效果。因为它是有限的，例如，它没有提供一种方法.delay()不能替代JavaScript的nativesetTimeout函数，它可能更适合某些用途例。

我不确定这是不是你的意思。

相关文章：