簡(jiǎn)短優(yōu)雅地實(shí)現(xiàn) sleep 函數(shù)

很多語(yǔ)言都有 sleep 函數(shù)，顯然 js 沒有，那么如何能簡(jiǎn)短優(yōu)雅地實(shí)現(xiàn)這個(gè)方法？

普通版

function sleep(sleepTime) {
    for(var start = new Date; new Date - start <= sleepTime;) {}
}
var t1 = +new Date()
sleep(3000)
var t2 = +new Date()
console.log(t2 - t1)

優(yōu)點(diǎn)：簡(jiǎn)單粗暴，通俗易懂。

缺點(diǎn)：這是最簡(jiǎn)單粗暴的實(shí)現(xiàn)，確實(shí) sleep 了，也確實(shí)卡死了，CPU 會(huì)飆升，無(wú)論你的服務(wù)器 CPU 有多么 Niubility。

Promise 版本

function sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time))
}

const t1 = +new Date()
sleep(3000).then(() => {
  const t2 = +new Date()
  console.log(t2 - t1)
})

優(yōu)點(diǎn)：這種方式實(shí)際上是用了 setTimeout，沒有形成進(jìn)程阻塞，不會(huì)造成性能和負(fù)載問題。

缺點(diǎn)：雖然不像 callback 套那么多層，但仍不怎么美觀，而且當(dāng)我們需要在某過程中需要停止執(zhí)行（或者在中途返回了錯(cuò)誤的值），還必須得層層判斷后跳出，非常麻煩，而且這種異步并不是那么徹底，還是看起來(lái)別扭

Async/Await 版本

function sleep(delay) {
  return new Promise(reslove => {
    setTimeout(reslove, delay)
  })
}

!async function test() {
  const t1 = +new Date()
  await sleep(3000)
  const t2 = +new Date()
  console.log(t2 - t1)
}()

缺點(diǎn)： ES7 語(yǔ)法存在兼容性問題，有 babel 一切兼容性都不是問題

更優(yōu)雅的寫法

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// 用法
sleep(500).then(() => {
    // 這里寫sleep之后需要去做的事情
})

不要忘了開源的力量

const sleep = require("sleep")

const t1 = +new Date()
sleep.msleep(3000)
const t2 = +new Date()
console.log(t2 - t1)

優(yōu)點(diǎn)：能夠?qū)崿F(xiàn)更加精細(xì)的時(shí)間精確度，而且看起來(lái)就是真的 sleep 函數(shù)，清晰直白。

缺點(diǎn)：缺點(diǎn)需要安裝這個(gè)模塊，^_，這也許算不上什么缺點(diǎn)。

綜上個(gè)人覺得合理的方案是Async/Await

從一個(gè)間簡(jiǎn)簡(jiǎn)單單的 sleep 函數(shù)我們就就可以管中窺豹，看見 JavaScript 近幾年來(lái)不斷快速的發(fā)展，不單單是異步編程這一塊，還有各種各樣的新技術(shù)和新框架，見證了 JavaScript 的繁榮。

你可能不知道的前端知識(shí)點(diǎn)：Async/Await是目前前端異步書寫最優(yōu)雅的一種方式