Question

我正在玩装载和移动页面上的div元素。我试图淡化一个字符串然后反转它。反向循环需要等到初始淡入循环完成之后。这是我到目前为止所做的，但它没有执行反向循环。我假设因为它还无法看到初始的div。

var string_to_reverse = "Reverse",
i;

for (i = 0; i < string_to_reverse.length; i++) {
    $("<div>" + string_to_reverse[i] + "</div>").hide()
        .appendTo("body").delay(500 * i).fadeIn(1000);
}

$("body div:last").load(function () {
    for (i = 1; i <= $("body div").length; i++) {
        $("body div:eq(" + i + ")").detach().prependTo($("body"));
    }
});

http://jsfiddle.net/vk45U/

Answer 1

div上没有加载事件，因此$("body div:last").load不会执行任何操作。操作完成后，您可以将函数传递给fadeIn以触发。尝试将回调添加到最后一个动画div。有点乱，但我相信你可以清理它

var string_to_reverse = "Reverse",
i;

for (i = 0; i < string_to_reverse.length; i++) {
    var dummy = function(){};
    $("<div>" + string_to_reverse[i] + "</div>").hide()
        .appendTo("body").delay(500 * i).fadeIn(1000, (i == string_to_reverse.length - 1)?rev:dummy);
}

function rev () {console.log('rev');
    for (var i = 1; i <= $("body div").length; i++) {
        $("body div:eq(" + i + ")").detach().prependTo($("body"));
    }
}

http://jsfiddle.net/mowglisanu/wXrC9/

Answer 2

你要做的事情是错误的：你真的不知道会花多少时间（你只能猜测，有时只做一个有根据的猜测，但它仍然是猜测）。

请注意基于事件的编程方法，而不是依赖当前的方法。在你的情况下，它可能是使用事件处理程序（例如，如果你正在加载一些外部内容，则使用“onload”事件处理程序）或更高阶函数（使用在执行某些操作后将调用的回调，也可能是通过附加它们作为通风处理程序的一部分）。

更多阅读：

Event Driven JavaScript，

尝试延迟for循环直到加载div

2 个答案: