JavaScript回调函数执行顺序不符合预期问题咨询

嘿，我来帮你理清楚这个回调顺序的问题~

先看看你的原始代码：

<HTML> 
<HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
function f() { 
    g(function(err){ 
        if(!err){ 
            alert('Call me later'); 
        } 
    }); 
} 
function g(callback) { 
    setTimeout(function(){ 
        alert("Call me first after 3 sec"); 
    }, 3000); 
    callback(false); 
} 
</SCRIPT> 
</HEAD> 
<BODY onload="f()"> 
</BODY> 
</HTML>

问题原因 #

你之所以遇到弹窗顺序和预期相反的情况，核心是JavaScript的异步执行机制在起作用：

• setTimeout是异步API，调用它时，浏览器只会把定时器任务放进「任务队列」，不会阻塞主线程的同步代码。
• 你的callback(false)是同步执行的，在setTimeout被调用后立刻就触发了，所以会先弹出Call me later，等3秒后，任务队列里的定时器任务才会执行，弹出Call me first after 3 sec。

修正方案 #

要实现你想要的顺序，只需要把callback(false)移到setTimeout的回调函数内部，这样它就会在3秒后的异步任务里执行，确保顺序正确：

<HTML> 
<HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
function f() { 
    g(function(err){ 
        if(!err){ 
            alert('Call me later'); 
        } 
    }); 
} 
function g(callback) { 
    setTimeout(function(){ 
        alert("Call me first after 3 sec"); 
        // 将回调放在定时器回调内，保证先执行第一个弹窗再触发后续逻辑
        callback(false); 
    }, 3000); 
} 
</SCRIPT> 
</HEAD> 
<BODY onload="f()"> 
</BODY> 
</HTML>

这样修改后，当g函数被调用时，主线程先完成定时器的注册，3秒后浏览器执行定时器里的代码：先弹出第一个提示，再调用传入的回调函数触发第二个弹窗，完全符合你的预期啦~

内容的提问来源于stack exchange，提问作者Arijit Chowdhury