Question

如下所示

} else {
    liveInfo
    .fadeOut(2000)
    .html('در حال پخش : ' + current)
    .fadeIn(1500)
    .delay(7000);
    if (next != ''){
        liveInfo
        .fadeOut(2000)
        .html('بعدی : ' + next)
        .fadeIn(1500)
        .delay(5000)
    }
}

我的代码的两部分异步运行，我看不到第一部分结果。

我无法看到它的结果：

    liveInfo
    .fadeOut(2000)
    .html('در حال پخش : ' + current)
    .fadeIn(1500)
    .delay(7000);

现在我想避免与提到的部分异步运行if块。

我可以这样做，但它迫使我有更多相同的代码：

} else {
    if (next != ''){
        liveInfo
        .fadeOut(2000)
        .html('در حال پخش : ' + current)
        .fadeIn(1500)
        .delay(7000)
        .fadeOut(2000)
        .html('بعدی : ' + next)
        .fadeIn(1500)
        .delay(5000)
    } else {
        // this code is repeated!
        liveInfo
        .fadeOut(2000)
        .html('در حال پخش : ' + current)
        .fadeIn(1500)
        .delay(7000)
    }
}

最好的方法是什么？

Answer 1

要进行同步任务 - 例如if条件或.html() - 在线等待，许多动画功能都会提供您可以使用的回调。而且，对于那些没有（例如.delay()）的人，您可以将任务包装到.queue()中，将任务添加到同一个fx队列：

liveInfo
.fadeOut(2000, function () {
    liveInfo.html('در حال پخش : ' + current);
})
.fadeIn(1500)
.delay(7000)
.queue(function (done) {
    if (next != ''){
        liveInfo
        .fadeOut(2000, function () {
            liveInfo.html('بعدی : ' + next);
        })
        .fadeIn(1500)
        .delay(5000)
    } 
    done();
});

Answer 2

} else {
    liveInfo
    .fadeOut(2000)
    .html('در حال پخش : ' + current)
    .fadeIn(1500);
    if (next != ''){
        liveInfo
        .delay(7000) /* move the delay to the next animation */
        .fadeOut(2000)
        .html('بعدی : ' + next)
        .fadeIn(1500)
        .delay(5000)
    }
}

我认为将延迟移动到下一个动画应该适合你想要的。

阻止JavaScript以异步方式运行

2 个答案: