setTimeout(fn1,10);
$(document).click(fn2); //will be called at 6ms;
$.ajax({ajaxSuccess(fn3); //async request,it uses 7ms;})
for(){
//将运行18ms;
};
在上面的代码中,setTimeout fn1将在10毫秒发生,点击事件处理程序fn2将在6毫秒,ajax回调fn3将在7毫秒.但是所有这三个函数都将被阻塞,直到for循环结束.在18ms,for循环结束,所以这些函数的调用顺序是什么.(fn1,fn2,fn3)或(fn2,fn3,fn1)
解决方法
但抛开本机承诺解决回调：
but all the three functions will be blocked until the for loop finish. At 18ms,the
forloop finished,so what order does these functions will be invoked. (fn1,fn3) or (fn2,fn1)
你给setTimeout的时间是近似的,因为当那个时候到来时,JavaScript UI线程可能正在忙着做其他事情(如你所知);还有(新的)规范所需的最短时间,但实施的程度因实施而异.同样,您不能保证click事件将在6ms排队,或者ajax完成将在7ms完成.
如果该代码启动,并且浏览器精确地完成了10ms,并且click事件正好排队6ms,并且ajax请求正好在7ms完成,那么顺序将是：fn2(点击处理程序),fn3(ajax完成) ),fn1(setTimeout),因为这是他们排队的顺序.
但请注意,这些是非常紧张的时间.在实践中,我希望回调排队的顺序实际上是随机的,因为点击的时间会有所不同,ajax的时间会有所不同等等.
我认为这是一个更好的例子：
var start = +new Date();
// Queue a timed callback after 20ms
setTimeout(function() {
display("20ms callback");
},20);
// Queue a timed callback after 30ms
setTimeout(function() {
display("30ms callback");
},30);
// Queue a timed callback after 10ms
setTimeout(function() {
display("10ms callback");
},10);
// Busy-wait 40ms
display("Start of busy-wait");
var stop = +new Date() + 40;
while (+new Date() < stop) {
// Busy-wait
}
display("End of busy-wait");
function display(msg) {
var p = document.createElement('p');
var elapsed = String(+new Date() - start);
p.innerHTML = "+" + "00000".substr(elapsed.length - 5) + elapsed + ": " + msg;
document.body.appendChild(p);
}
输出的顺序是两个循环消息,后跟10ms回调,20ms回调和30ms回调,因为这是回调排队等待主JavaScript线程服务的顺序.例如：
+00001: Start of busy-wait +00041: End of busy-wait +00043: 10ms callback +00044: 20ms callback +00044: 30ms callback
…数字表示自脚本启动以来的毫秒数.
