如何在JavaScript中将普通函数改为异步？自定义setTimeout实现方案

一、先搞懂JavaScript的异步本质 #

JavaScript是单线程的，所有同步任务都在主线程的执行栈里排队执行。而异步任务会被放到任务队列里，等主线程的同步任务全部执行完，才会去任务队列里取任务执行。

你原来写的while(true)循环是同步阻塞的，它会一直霸占主线程，根本不给任务队列里的异步任务留执行机会，所以你的回调永远不会触发，甚至整个页面都会直接卡死。

二、如何在普通函数里实现异步？ #

要实现异步，必须借助JavaScript环境提供的异步API（比如原生定时器、Promise、MessageChannel等），不能靠同步循环硬模拟。下面针对你的需求，给出几种正确的实现方式：

1. 基础版自定义异步定时器（类似setTimeout） #

如果你需要的是单次延迟执行（对应你说的执行console.log("after")），最直观的实现是基于原生setTimeout封装：

function myCustSetTimeout(time, callback) {
  // 利用原生setTimeout将回调放入宏任务队列，实现非阻塞延迟
  setTimeout(() => {
    callback();
  }, time);
}

// 调用测试
console.log("before");
myCustSetTimeout(1000, () => {
  console.log("after");
});
console.log("middle");

执行顺序会是：before → middle → 1秒后after，完全符合异步的预期。

2. 不依赖原生定时器的底层实现（用MessageChannel） #

如果你想完全脱离原生setTimeout，可以用浏览器的MessageChannel（宏任务机制）来实现：

function myCustSetTimeout(time, callback) {
  const channel = new MessageChannel();
  // 监听消息事件，触发回调
  channel.port1.onmessage = () => {
    callback();
  };
  // 延迟发送消息，触发异步执行
  setTimeout(() => {
    channel.port2.postMessage(null);
  }, time);
}

// 调用测试
console.log("before");
myCustSetTimeout(1500, () => {
  console.log("after");
});
console.log("middle");

原理是利用MessageChannel的消息事件属于宏任务，会在主线程空闲时执行，避免了同步阻塞。

3. 自定义setInterval（间隔重复执行） #

如果确实需要实现间隔重复执行的定时器，推荐用递归+setTimeout模拟，比原生setInterval更可靠（避免时间漂移问题）：

function myCustSetInterval(time, callback) {
  const intervalId = { id: null };
  // 递归执行回调，每次执行完再设置下一次延迟
  function execute() {
    callback();
    intervalId.id = setTimeout(execute, time);
  }
  intervalId.id = setTimeout(execute, time);
  
  // 返回清除定时器的函数
  return function clearMyInterval() {
    clearTimeout(intervalId.id);
  };
}

// 调用示例
console.log("start");
const clearTimer = myCustSetInterval(1000, () => {
  console.log("interval trigger");
});
// 5秒后停止定时器
setTimeout(() => {
  clearTimer();
  console.log("interval stopped");
}, 5000);

三、关键知识点总结 #

• 同步阻塞是异步的天敌：永远不要用while(true)这种死循环模拟延迟，它会卡死主线程，所有异步任务都无法执行。
• 异步依赖任务队列：JavaScript异步任务分宏任务（比如定时器、MessageChannel）和微任务（Promise、MutationObserver），主线程会先清空微任务队列，再处理宏任务队列。
• 自定义异步必须借环境API：JavaScript本身没有原生休眠功能，必须依赖浏览器/Node.js提供的异步机制实现非阻塞延迟。

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