.delay() 和 .setTimeout()

Question

根据 jQuery 文档 .delay()，

.delay() 方法最适合在排队的 jQuery 之间进行延迟 影响。因为它是有限的——例如，它没有提供一种方法 取消延迟——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用途 案例。

有人可以对此进行扩展吗？什么时候使用.delay()比较合适，什么时候使用.setTimeout()比较好？

Answer 1

我认为您发布的内容确实很清楚。

使用 .delay() 实现包括动画在内的 jQuery 效果。

setTimeout() 最适合用于其他一切。例如，当您需要在特定的时间触发事件时。

Answer 2

据我了解， .delay() 专门用于在给定 jQuery 队列中的方法之间添加延迟。例如，如果您想在 1 秒内将图像淡入视图，使其可见 5 秒，然后再花一秒将其再次淡出视图，则可以执行以下操作：

$('#image').fadeIn(1000).delay(5000).fadeOut(1000);

在本例中，< code>.delay() 使用起来更直观，因为它专门用于延迟给定 jQuery 队列中的事件。另一方面，setImeout() 是一种本机 JavaScript 方法，并不明确用于队列。如果您希望单击按钮后 1 秒弹出警告框，您可以执行以下操作：

function delayAlert() {
    var x = setTimeout("alert('5 seconds later!')", 5000);
}

<input type="submit" value="Delay!" onclick="delayAlert();" />

Answer 3

您可以将 delay 与动画一起使用，例如：

$('.message').delay(5000).fadeOut();

您还可以使用 timeOut 来延迟动画的开始，例如：

window.setTimeout(function(){
  $('.message').fadeOut();
}, 5000);

如您所见，使用 更容易延迟 比带有动画的setTimeout 。

您可以使用 setTimeout 延迟几乎所有内容，但只能使用 delay 延迟动画。非动画的方法不受延迟的影响，因此在隐藏元素之前不会等待一段时间，它会立即隐藏它：

$('.message').delay(5000).hide();

Answer 4

.delay() 主要用于将动画效果链接在一起，中间有暂停。

正如文档中提到的，无法取消延迟。如果您可能想要取消延迟，则应使用 setTimeout() 来代替，这样您就可以使用 clearTimeout() 取消它

Answer 5

Delay() 的另一个副作用：它似乎禁用了隐藏（或淡出等）被延迟的对象的能力，直到延迟结束。

例如，我设置了以下代码（也许 stackoverflow 开发人员会识别 css 名称......）来隐藏“div”：

 $j(document).ready(function(){
   var $messageDiv = $j("<div>").addClass('fading_message')
       .text("my alert message here").hide();
   var $closeSpan = $j("<span>").addClass('notify_close').text("x");
   $closeSpan.click(function() {$j(this).parent().slideUp(400);});
   $messageDiv.append($closeSpan);
   $j('.content_wrapper_div').prepend($messageDiv);
   $messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0);
 });

单击跨度（位于“div”中）中的“x”确实会触发关闭点击功能（我在那里测试了警报），但 div 没有按照指示向上滑动。但是，如果我用以下内容替换最后一行：

     $messageDiv.fadeTo(500, .9);

..然后它确实起作用 - 当我单击“x”时，周围的 div 向上滑动并离开。似乎 $messageDiv 上的“delay()”函数的后台运行“锁定”了该对象，因此在延迟完成之前尝试关闭它的单独机制无法执行此操作。