试图推迟一个for循环，直到一个div加载

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，