让jQuery在执行下一行代码之前等待一个.each函数完成？

Question

让jQuery在执行下一行代码之前等待一个.each函数完成？

3

我有这个：

$("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

- Mere Development

这里的问题不在于 .each() 函数，因为它会在下一行执行之前完成。问题在于 .delay() 函数，它的延迟时间比运行 .each() 函数并执行下一行所需的时间更长。 - jtfairbank

4个回答

1

它可以是：

$("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;
            }
        });
    });
});

- bestmike007

嗨，这对我也有用，但我使用了Matt的版本，因为它看起来更整洁。纯粹是美学上的考虑 :) - Mere Development

0

欢迎来到基于事件、非线性的异步世界！

$(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上进行测试。

- buschtoens

谢谢您。这个解决方案对我没有起作用（虽然我已经修复了逗号 > 分号的错误），但感谢您解释了问题，我会更加深入地研究这些脚本的异步性质！ - Mere Development

0

我遇到了同样的问题，请看一下这个链接，它将帮助您设计一个新的回调函数：http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html

- BuZz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt · Accepted Answer

以下工作：

$("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 是否是绑定的最后一个回调函数。如果是，就执行重定向。