JavaScript sleep睡眠函數(shù)的使用

更新時(shí)間：2021年07月08日 15:34:25 作者：進(jìn)擊的大羊

JavaScript是單線程運(yùn)行的，沒有內(nèi)置的sleep函數(shù)，那么JavaScript sleep睡眠函數(shù)是怎樣實(shí)現(xiàn)的，感興趣的小伙伴們可以參考一下

1.sleep函數(shù)

JavaScript是單線程運(yùn)行的，沒有內(nèi)置的sleep函數(shù)，現(xiàn)在模擬實(shí)現(xiàn)sleep延遲執(zhí)行的效果。

使用睡眠函數(shù)實(shí)現(xiàn)紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環(huán)改變顏色。

2. setTimeout

直接使用setTimeout實(shí)現(xiàn)sleep()的方法，兼容性最好，但是使用了回調(diào)函數(shù)的實(shí)現(xiàn)方式，代碼的可讀性和維護(hù)性不是很好。

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

sleep(fun,2000);

setTimeout
setTimeout是最基本的實(shí)現(xiàn)方式，代碼如下，使用遞歸來實(shí)現(xiàn)循環(huán)改變顏色：
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方法異步的實(shí)現(xiàn)一種方式，借助Promise方法可以優(yōu)雅的構(gòu)建sleep實(shí)現(xiàn)方法，避免了使用函數(shù)回調(diào)的使用方式。

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

Promise

使用Promise，把下一次的顏色改變寫在then里面，最后同樣使用遞歸完成循環(huán)。

使用promise代替setTimeout，利用鏈?zhǔn)秸{(diào)用以及then來實(shí)現(xiàn)燈的轉(zhuǎn)換，then返回一個(gè)promise對(duì)象，當(dāng)這個(gè)對(duì)象為resolve狀態(tài)then可以持續(xù)調(diào)用。

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實(shí)際上是generator和promise的語法糖，在提供同步編程方式實(shí)現(xiàn)異步調(diào)用的基礎(chǔ)上，同時(shí)滿足對(duì)sleep函數(shù)語義化的支持，也是常用的sleep的實(shí)現(xiàn)方式。

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

wait(3000);

async await 使用

使用async await就可以避免Promise的一連串.then.then.then，也不再需要遞歸，使用while(true)就可以實(shí)現(xiàn)循環(huán)。

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);
}