如何将函数显式推入callback queue（回调队列）以在setTimeout后执行

实现方案 #

你有三种常用的实现方式，都可以保证callbackfn在setTimeout的逻辑执行完成后才运行：

1. 直接嵌套到setTimeout回调中（最简方案） #

这是最直接的方式，把callbackfn作为setTimeout回调的最后一步执行，天然就会在setTimeout内部逻辑跑完后被调用，JS事件循环会自动处理回调入队逻辑：

setTimeout(() => {
  // 此处为setTimeout原本要执行的逻辑
  console.log('setTimeout 逻辑执行完成');
  // 最后触发callbackfn
  callbackfn();
}, 1000);

整个setTimeout的回调会被自动推入宏任务队列，等全局同步代码执行完成后再执行回调内部逻辑，最后触发callbackfn。

2. 用Promise封装实现链式调用 #

如果不想嵌套回调，或者setTimeout逻辑和callbackfn的定义相互独立，可以用Promise封装setTimeout：

// 封装setTimeout为Promise实例
function delay(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      // 此处为setTimeout原本要执行的逻辑
      console.log('setTimeout 逻辑执行完成');
      resolve();
    }, ms)
  })
}

// 链式调用callbackfn
delay(1000).then(callbackfn);

Promise的then回调会被自动推入微任务队列，优先级高于普通宏任务队列，会在当前setTimeout的回调逻辑执行完成后立刻运行。

3. async/await语法糖写法 #

逻辑和Promise封装方案一致，只是写法更扁平化易读：

async function execAsyncTask() {
  await delay(1000); // 复用上面定义的delay函数
  callbackfn();
}

execAsyncTask();

不需要手动操作回调队列，JS事件循环会自动处理异步回调的入队逻辑，只要按照上述方式把callbackfn的触发时机绑定到setTimeout逻辑执行完成的节点即可。

内容的提问来源于stack exchange，提问作者TusHar AroRa