如何正确使用回调(callback)控制异步代码的执行顺序？

嘿，你的思路其实已经对了一半！问题出在你调用first函数的时候没有传递回调参数，导致cb是undefined，执行cb()自然会报错。咱们来一步步修正：

你的代码问题分析 #

你写的first函数已经预留了回调参数cb，但调用时只写了first(); second();，没有把second作为回调传进去，所以当setTimeout里执行cb()时，找不到这个函数，就会抛出错误。

正确的回调实现 #

只需要在调用first的时候，把second作为参数传进去就可以了，完整代码如下：

function first(cb){ 
  // 模拟代码延迟
  setTimeout( function(){ 
    console.log(1); 
    cb(); // 延迟结束后执行回调
  }, 500 ); 
}
function second(){ console.log(2); }

// 把second作为回调传给first
first(second);

执行这段代码，就会先输出1，等待500ms后执行cb()也就是second()，输出2，完美符合你的预期！

额外扩展：用匿名回调的写法 #

如果你不想单独定义second函数，也可以直接传一个匿名函数作为回调，效果是一样的：

function first(cb){ 
  setTimeout( function(){ 
    console.log(1); 
    cb(); 
  }, 500 ); 
}

first(function() {
  console.log(2);
});

执行逻辑再梳理一下 #

1. 调用first(second)时，cb参数指向了second函数；
2. first内部启动setTimeout，这个异步任务会被放到事件队列中，主线程继续执行后续代码（这里没有其他代码，所以主线程空闲）；
3. 500ms后，setTimeout的回调执行，先打印1，然后调用cb()也就是second()，打印2。

这样就完全实现了你想要的先1后2的输出顺序啦！

内容的提问来源于stack exchange，提问作者The Walrus