我在 jQuery 上的延迟都不起作用

Question

我的脚本：

$(function () {
    $("body").addClass("lost");

    var counter = 0;
    var time = 400;
    var delay = time*5+250;

    if($("body").hasClass("lost")) {
        $("nav").delay(delay).css({'background': 'transparent'});
        $("nav").delay(delay).css({'background-color': '#e30'});
        $(this).find(".slogan").delay(delay).html('USB-stick  is lost');
        var title = "this USB-stick is lost";
    } else {
        var title = "this USB-stick is not lost";
        $(this).find(".slogan").delay(delay).html('USB-stick is not lost');
    }

    var titleTimerId = setInterval(function(){
        document.title = document.title + '.';
        counter++;
        if(counter == 5){
            clearInterval(titleTimerId);
            document.title = title;
        }
    }, time);
});

我想要达到的是，在达到 var 延迟时间之后，所有内容都发生了变化，并且标题发生了变化，我在脚本中的某些元素中放置了这些内容，但这对我不起作用

这代表导航：

<nav onclick="window.location=''">
    <img src="//sakesalverda.nl/logo.png" alt="badge html 5" class="logo_nav"/>
    <p>sakesalverda.nl</p>
    <h1 class="slogan">USB-stick</h1>
</nav>

Answer 1

来自jQuery docs：

.delay() 方法允许我们延迟执行那些 在队列中跟随它。它可以与标准效果队列一起使用 或使用自定义队列。只有队列中的后续事件被延迟； 例如，这不会延迟 .show() 的无参数形式或 .hide() 不使用效果队列。

css() 和 html() 方法不使用队列，您需要使用 queue() 方法包装它们，例如：

$("nav")
    .delay(delay)
    .queue(function (next) {
        $(this).css({'background': 'transparent'});
        next();
    });

Answer 2

为什么不将 if else 循环放入具有 delay 计时器的 setTimeout 函数中？

setTimeout(function () {
        $("nav").delay(delay).css({
            'background': 'transparent'
        });
        $("nav").delay(delay).css({
            'background-color': '#e30'
        });
        $(this).find(".slogan").delay(delay).html('USB-stick  is lost');
        var title = "this USB-stick is lost";
    }, delay);

其他情况也一样