JS 如何实现 sleep 函数？setTimeout、Promise 与 async/await 对比

1. sleep函数

JavaScript 运行在单线程环境中，语言标准库并未提供原生的 sleep 函数。为了模拟延迟执行的效果，开发者需要自行实现 sleep 机制。

通过实现睡眠函数，可以构建如红绿灯这样的逻辑：红灯持续 2 秒，黄灯持续 1 秒，绿灯持续 3 秒，并循环切换颜色。

2. setTimeout

直接调用 setTimeout 是实现 sleep 功能最基础且兼容性最好的方法。然而，这种基于回调函数的实现方式会导致代码嵌套过深，可读性和后期维护性较差。


// setTimeout
let fun = () => console.log('time out');
let sleep = function(fun,time){
  setTimeout(()=>{
    fun();
  },time);
}

sleep(fun,2000);

setTimeout
setTimeout是最基本的实现方式，代码如下，使用递归来实现循环改变颜色：
function changeColor(color) {
 console.log('traffic-light ', color);
}
function main() {
 changeColor('red');
 setTimeout(()=>{
  changeColor('yellow');
  setTimeout(() => {
   changeColor('green');
   setTimeout(main, 2000);
  }, 1000);
 }, 2000);
}
main();

3.Promise

在 ES6 语法体系中，Promise 是实现 sleep 异步逻辑的一种优雅方式。借助 Promise 对象，可以避免传统的函数回调嵌套，使代码结构更加清晰。


// promise
let fun = () => console.log('time out');
let sleep2= (time)=> new Promise((resolve)=>{
  setTimeout(resolve,time)
})
sleep2(2000).then(fun);

Promise

使用 Promise 时，将下一次颜色切换的逻辑封装在 then 回调中，最后通过递归调用实现颜色的无限循环切换。

利用 Promise 替代单纯的 setTimeout，可以通过链式调用和 then 方法实现灯光状态的转换。then 方法返回一个新的 Promise 对象，当该对象处于 resolve 状态时，then 会继续被调用。


const traffic_light=(color,duration)=>{
  return new Promise((resolve,reject)=>{
    console.log('traffic-light ', color);
    setTimeout(()=>{
        resolve()
    },duration)
  })
}
const main=()=>{
    Promise.resolve()
    .then(()=>{
        return traffic_light('red',3000)
    })
    .then(()=>{
        return traffic_light('yellow',1000)
    })
    .then(()=>{
        return traffic_light('green',2000)
    })
    .then(()=>{
        main();
    })
}
main()

4. async await

async/await 本质上是 Generator 函数与 Promise 的语法糖。它在提供同步编程风格以实现异步调用的基础上，同时满足了对 sleep 函数语义化的支持，是目前常用的 sleep 实现方案。


// async await
async function wait(time){
  await sleep2(time);
  fun();
}

wait(3000);

async await 使用

使用 async/await 可以彻底避免 Promise 链式调用中连续的 .then.then.then 写法，同时也无需使用递归。只需配合 while(true) 循环即可实现持续的执行逻辑。


function sleep(duration) {
  return new Promise(resolve => {
      setTimeout(resolve, duration);
  })
}
async function changeColor(color, duration) {
 console.log('traffic-light ', color);
 await sleep(duration);
}
async function main() {
 while (true) {
  await changeColor('red', 2000);
  await changeColor('yellow', 1000);
  await changeColor('green', 3000);
 }
}
main();

5. 1s后输出1 2s后输出2 3s后输出3


const log = console.log;
const sleep = (timeout) => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve();
    }, timeout)
  })
}

const main = async()=>{
  await sleep(1000);
  log(1);
  await sleep(2000);
  log(2);
  await sleep(3000);
  log(3);
}

参考文章：

红绿灯红绿灯

到此这篇关于JavaScript sleep睡眠函数的使用的文章就介绍到这了,更多相关JavaScript sleep睡眠函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 实现 sleep 延迟执行的三种主流方案