关于JavaScript回调函数执行流程及异步返回问题的困惑

开发者阿泽

2026-7-7

关于JavaScript回调函数与异步执行的解惑

先看你提到的两种写法，直观对比差异：

// 直接返回的错误写法，拿不到结果
function add(a, b) {
  setTimeout(() => {
    return a + b; // 这里的返回值根本没地方接收
  }, 0);
}

const result = add(1, 2);
console.log(result); // 输出undefined

// 用回调的正确写法
function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b;
    callback(sum); // 主动调用回调传递结果
  }, 0);
}

add(1, 2, (sum) => {
  console.log(sum); // 输出3
});

为什么直接返回拿不到结果？

setTimeout是异步API，JavaScript调用它的时候，不会等着内部代码执行，而是把这个异步任务扔给宿主环境（浏览器/Node.js）去处理计时，自己继续往下走。所以add函数会在setTimeout调用完成后立刻执行完毕，返回undefined——这时候setTimeout里的求和代码还没开始运行，它的返回值根本不会被add函数捕获，自然拿不到结果。

回调函数是怎么在主函数执行后触发的？

你传给add的callback是一个预先定义好的“处理逻辑”，相当于你提前跟异步代码约定：“等你干完活，就调用这个函数把结果给我”。完整的执行流程是这样的：

主代码调用add(1, 2, 回调函数)，add进入调用栈执行。
add内部调用setTimeout，宿主环境启动计时器，同时把setTimeout的内部回调（求和+调用callback的代码）加入宏任务队列。
setTimeout执行完从调用栈弹出，add也执行完毕弹出，此时调用栈为空。
Event Loop（JavaScript的事件循环机制）检测到调用栈空了，就把宏任务队列里的setTimeout内部回调拉到调用栈执行。
这个内部回调算出1+2=3，然后主动调用你传的callback(3)，callback进入调用栈执行，你就能拿到并处理结果了。