带有IF语句的jquery延迟函数

Can anyone tell me why my IF statement is firing before updating the UI with the each loop?

任何人都可以告诉我为什么我的IF语句在每次循环更新UI之前都会被触发？

The code basically wants to delay adding css classes to the UI then once each one has been added, redirect the user. It currently just directs immediately?!

代码基本上想要延迟向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;
            });
        }

    });
});

1 个解决方案

#1

Your if statement is being executed immediately because it isn't inside the delay function. Try moving it in there.

您的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;
           });
       }
    });