javascript - jquery延迟函数与IF语句

Question

谁能告诉我为什么我的 IF 语句在使用每个循环更新 UI 之前会触发？

该代码基本上是想延迟向 UI 添加 css 类，然后在添加每个类后重定向用户。目前只是立即指挥？!

$("#logo").click(function() {

    //define variables:
    var eventDuration = 500;
    var elementArray = ['ribbon', 'left-panel', 'wid-id-1', 'wid-id-2'];
    var animationArray = ['slideOutRight', 'slideOutLeft', 'rotateOutUpRight', 'rotateOutUpRight'];

    //Loop through elements and update UI with timer function:
    $.each(elementArray, function(index, value) {

        //Increments the delay of the element updates:
        var delaytimer = index * eventDuration + eventDuration;

        //Adds animation css classes to onpage elements:
        $('#' + value).delay(delaytimer).queue(function() {
            $(this).addClass('animated ' + animationArray[index]).dequeue();
        });

        //Once complete redirect to the home page:
        if (index === 3) {
            $(this).delay(delaytimer + 500).queue(function() {
                window.location.replace('/').dequeue;
            });
        }

    });
});

Answer 1

您的 if 语句将立即执行，因为它不在延迟函数内。尝试将其移到那里。

$('#' + value).delay(delaytimer).queue(function() {
        $(this).addClass('animated ' + animationArray[index]).dequeue();


       //Once complete redirect to the home page:
       if (index === 3) {
            $(this).delay(delaytimer + 500).queue(function() {
               window.location.replace('/').dequeue;
           });
       }
    });