Заставить jQuery дождаться завершения одной функции .each перед выполнением следующей строки? - PullRequest
Новая
       13

Заставить jQuery дождаться завершения одной функции .each перед выполнением следующей строки?

3 голосов
/ 04 ноября 2011

У меня есть это: 

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc = this.href;

    //Do this first...
    $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut();
    });

    //And only then do this.. 
    window.location = loc;

});

Как принудительно завершить затухание до изменения местоположения? Если бы это был только один fadeOut (), я бы использовал его обратный вызов, но так как их много, я не могу понять, как это сделать.

Ура! Ben

Ответы [ 4 ]

2 голосов
/ 04 ноября 2011

работает ; 

$("a.fadeout").click(function(event){
    event.preventDefault();

    var loc = this.href;
    var amount = $($(".faded").get().reverse()).each(function(i) {
        $(this).delay(i * 100).fadeOut(function () {
            if (i == amount -1) {
                window.location = loc;
            }
        });
    }).length;
});

Это самый чистый способ, который я могу придумать. Мы храним общее количество элементов и проверяем в обратном вызове fadeOut, был ли связан последний обратный вызов, который был связан. Если это так, он выполняет перенаправление.

1 голос
/ 04 ноября 2011

Может быть: 

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc = this.href;
    var list = $($(".faded").get().reverse());
    var size = list.length;
    var count = 0;
    list.each(function(i) {
        $(this).delay(i * 100).fadeOut(function () {
            if (++count == size) {
                window.location = loc;
            }
        });
    });
});
0 голосов
/ 04 ноября 2011

Добро пожаловать в основанный на событиях нелинейный мир async !

$(this).delay(i * 100) создает новый setTimeout().И это не вызывает приостановки всего сценария, иначе весь браузер зависнет на это время.JQuery предлагает несколько способов решения этой проблемы, но, как вы это делаете, это невозможно.Вам придется проверять каждый раз, когда fadeOut() выполняется. 

$("a.fadeout").click(function(event){
    event.preventDefault();
    var loc    = this.href,
        $stack = $(".faded").get().reverse();

    //Do this first...
    $($stack).each(function(i) {
        $(this).delay(i * 100).fadeOut().queue(function() {
            if($stack.lenght <= i+1) {
                window.location = loc;
            }
        });
    });
});

Проверьте его на jsFiddle .

0 голосов
/ 04 ноября 2011

Я столкнулся с той же проблемой, пожалуйста, посмотрите на эту ссылку, она поможет вам создать новый обратный вызов: http://jquery -howto.blogspot.com / 2009/11 / create-callback-functions-для-your.html

...