jQuery .delay() 不起作用

Question

我有以下 JavaScript sn-p：

$("#dashboard").addClass("standby").delay(3000).removeClass("standby");
$(".active").removeClass("active");
$("." + target).addClass("active");
$(".showDiv").removeClass("showDiv").addClass("hide");
$("#" + target).removeClass("hide").addClass("showDiv");

虽然#dashboard 处于待机，它应该处理所有这些CSS-Class 更改。更改后，它应该再次显示#dashboard。所以我在standby-class 的添加和删除之间设置了delay()。为了查看它是否有效，我添加了 3sek 的持续时间太长。

但它不会延迟！为什么不呢？没看到。。。

Answer 1

delay 只会作用于通过动画管道的动作，不会影响像这样的即时原子操作的时间。为了延迟诸如添加或删除类之类的事情，您可以使用setTimeout。

.delay() 方法允许我们延迟执行队列中跟随它的函数。它可以与标准效果队列或自定义队列一起使用。

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

Answer 2

.delay() 只会延迟 jQuery 中的动画。 要设置实际延迟，您可能需要使用setTimeout()。

let cancelId;
// ...
cancelId = window.setTimeout(function() {
  // ... do stuff ... 
}, 3000);

// If you want to cancel prematurely, use `window.clearTimeout`
if (cancelId) {
  window.clearTimeout(cancelId);
}

这将在 3 秒（3000 毫秒）内执行 ... do stuff ... 中的代码

Answer 3

如前所述...延迟不会像您期望的那样工作... 以下是它的工作原理：

$(document).ready(function(){        
    var audio = new Audio('sang3.mp3');
    audio.play();

    $("#image1")
        .hide()
        .attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250")
        .fadeIn(1000)
        .delay(3000)
        .fadeOut(1000)
        .queue(function(next) { 
          $(this).attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250")
          next(); 
        })
        .fadeIn(1000); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="" id="image1">

Answer 4

延迟不会像你期望的那样在这些线上工作：

$("#image1").delay(9000).attr("src", "image/image1.jpg");
$("#image1").delay(9000).attr("src", "image/image2.jpg");

它将立即运行属性更改。为什么？因为属性更改不是“动画”的一部分。延迟只能与动画函数一起使用。

如果您只需要两张图片，最简单的方法是将两张图片堆叠在一起，然后根据需要淡入淡出。

如果您想将其扩展到许多图像，请尝试使用更强大的“.animate”函数来淡入和淡出。 “Animate”可以被赋予一个回调函数，当完成时将被调用。

Answer 5

尝试使用.queue()

  $("#image1").delay(5000).fadeIn(3000, function() {
      $(this).delay(9000, "task" ).queue("task", function() {
        $(this).attr("src", "image/image1.jpg")
        .delay(5000).fadeOut(3000, function() {
          $(this).delay(9000, "task")
          .queue("task", function() {
            $(this).attr("src", "image/image2.jpg")
            .delay(5000).fadeIn(3000, function() {
               $(this).delay(5000).fadeOut(3000)
            })
          }).dequeue("task")
        });
      }).dequeue("task")
    });

Answer 6

你所有的延迟都始于$(document).ready();

$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(9000).attr("src", "image/image1.jpg"); 
$("#image1").delay(5000).fadeOut(3000);
$("#image1").delay(9000).attr("src", "image/image2.jpg");
$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(5000).fadeOut(3000);

这样想。当 doc 准备好时，JS 开始执行该函数中的任何内容，它执行的第一个延迟是：$("#image1").delay(5000).fadeIn(3000);

这将启动 5000 毫秒的延迟，然后是持续时间为 3000 毫秒的fadeOut()。这个 fadeOut 与延迟是同步的，但下一行代码与这行​​完全异步。

然后它进行到下一行。等等。它不会等到您的延迟完成，它只是开始在后台计数。

.delay() 应用于同一元素时会堆叠：JSFiddle

我留下这个以防有人像我一样感到困惑

Answer 7

似乎对于您正在尝试做的事情，您可能想看看 CSS 过渡：

http://css-tricks.com/almanac/properties/t/transition/

您仍然可以拥有.addClass()，但现在您的类将使用这些转换属性，并且您不需要 .delay()。

Answer 8

通常我们需要在移除待机状态之前做一些事情，所以我们在一个ajax回调中移除这个类：

$("#dashboard").addClass("standby");
$.get('urltoget',function(data){
  if(data)
    $("#dashboard").removeClass("standby");
  else
    $("#dashboard").removeClass("standby").addClass('error');
})