Question

我试图在加载图像后引入延迟，但它一直跳过.delay（）

$(\"#output\").html(\"<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>\").delay(5000);

我已经尝试了上述代码的许多版本，但它仍然无法正常工作

感谢帮助人员。

Answer 1

AFAIK delay()函数只会延迟后续队列中的函数。所以你需要在delay()之后调用另一个函数。

也许你可以试试

.delay(5000).finish();

Answer 2

来自jQuery documentation

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它没有提供一种方法取消延迟-.delay（）不是JavaScript本机的替代品 setTimeout函数，可能更适合某些用途例。

您的图片正在加载，然后延迟正在触发，然后......由您决定接下来会发生什么。但由于.delay附加到#output，因此您只能对#output执行某些操作。例如，你可以淡出它。

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").delay(5000).fadeOut();

http://jsfiddle.net/M2GRj/

如果您希望在加载图像之前有延迟，请在设置html之前使用延迟。

$("#output").hide().delay(5000).html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").fadeIn();

http://jsfiddle.net/M2GRj/3/

如果你想在图像加载后引发一个暂停，然后再将某个东西独立，那么给你的图像一个ID并在load事件上用setTimeout调用一个函数。

$("#output").html("<center><img id='img1' src='http://i.imgur.com/GM6KJdh.gif' /></center>"); // Note: You can only use this after #img1 has been added to the DOM $('#img1').load(function(){setTimeout('alert("hello")',5000);});

http://jsfiddle.net/M2GRj/5/

Answer 3

正如jQuery文档中所解释的那样，.delay()是一个jQuery动画方法，它只会延迟后续动画（在同一元素上），它不会延迟非动画方法结果，也不会“暂停”代码执行。因此，显示的代码行将立即执行。

假设你要做的是在执行下一行之前等待两秒钟，你可以这样做：

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>");
setTimeout(function() {
   // your other code here
}, 2000);

这使用JavaScript的内置setTimeout() function来延迟执行您传递给它的函数中的任何代码。

Answer 4

jQuery API说：

.delay（）方法允许我们延迟执行那些函数在队列中关注它。它可以与标准效果队列一起使用或者使用自定义队列。只有队列中的后续事件被延迟

以下为例进行检查

当执行以下语句时，元素向上滑动300毫秒，然后暂停800毫秒，然后淡入400毫秒。

$('#foo').slideUp(300).delay(800).fadeIn(400);

如果您在延迟后没有任何后续事件，则可以使用JavaScript's native setTimeout function

如何使用setTimeout function？

setTimeout(function() {
  //your code
}, 2000);  // will work with every browser

有关详情，请查看.delay()和setTimeout

在.html（）调用之后，Jquery延迟被忽略了

4 个答案: