你错过了 JavaScript 内部结构的一个关键特性:事件循环。所有函数都存储在那里并等待它们被执行。此外,JavaScript(通常——不包括 AJAX 和工作线程)是单线程的,所以在任何时候,只有一个函数被执行。
关于您的脚本:事件队列上的第一个函数是您的ready()
回调。它被执行,同时在setTimeout()
事件队列中放置许多其他函数(来自调用的回调)。但是为了执行这些,第一个函数必须完成,这意味着所有的循环都必须完成并且函数必须返回。
所以基本上会发生这种情况(每个要点中的第二行表示当前事件循环状态):
只是ready
回调排队等待执行。
ready()-回调
setTimeout()
回调被放置在事件队列中。
ready()-回调 | setTimeout()-回调
所有的循环都完成了。
ready()-回调 | setTimeout()-回调
ready()
回调已完成并从队列中删除。
setTimeout()-回调
刚才setTimeout()
回调被执行,你看到了你的alert()
消息!
setTimeout()-回调
因此,为了alert()
在循环执行之间找到某个位置,您要么必须在第 2500 次迭代之后执行它:
$(document).ready(function(){
var k = 0;
for (var i = 0; i < 5000; ++i) {
++k;
$('.inner').append('<p>Test</p>' + k.toString());
if( i == 2500 ) {
alert( 'Hello' );
}
}
});
或者将所有这些插入setTimeout()
也放入回调中(如果您想访问外部,则需要某种关闭k
):
$(document).ready(function(){
var k = 0;
setTimeout(function(){alert("Hello")},500);
for (var i = 0; i < 5000; ++i) {
++k;
setTimeout( (function( k ) {
$('.inner').append('<p>Test</p>' + k.toString());
})( k ), 0 );
}
});