摘要：實(shí)現(xiàn)一個(gè)目的有多種途徑，俗話說(shuō)，條條大路通羅馬。因?yàn)槭堑囊粋€(gè)靜態(tài)函數(shù)，所以必須以的形式來(lái)使用。注意一元運(yùn)算符一元運(yùn)算符將其操作數(shù)轉(zhuǎn)換為類型并反轉(zhuǎn)其正負(fù)。相當(dāng)于用來(lái)返回對(duì)象的字符串表示。

有些東西很好用，但是你未必知道；有些東西你可能用過(guò)，但是你未必知道原理。
實(shí)現(xiàn)一個(gè)目的有多種途徑，俗話說(shuō)，條條大路通羅馬。發(fā)散一下大家的思維以及拓展一下知識(shí)面。

sleep函數(shù)主要用來(lái)做延遲執(zhí)行的，很多編程語(yǔ)言都有sleep函數(shù)，但是javascript沒有這個(gè)函數(shù)，我們實(shí)現(xiàn)一下：

function sleep(sleepTime){
    for(var start = +new Date;+new Date - start
優(yōu)點(diǎn)：簡(jiǎn)單粗暴，通俗易懂。
缺點(diǎn)：確實(shí)sleep了，但是卡死了，cpu會(huì)飆升，精確度不準(zhǔn)
2、promise版本
// promise版本
function sleep(sleepTime){
    return new Promise(resolve => setTimeout(resolve,sleepTime));
}
var t1 = +new Date();
sleep(3000).then(()=>{
    var t2 = +new Date();
    console.log(t2-t1);
})
優(yōu)點(diǎn)：實(shí)際上用了setTimeout，沒有形成進(jìn)程阻塞，不會(huì)造成性能和負(fù)載問(wèn)題。
缺點(diǎn)：雖然解決了回調(diào)函數(shù)的嵌套，但是還是不美觀，而且異步不徹底，過(guò)程中停止執(zhí)行。
3、generator版本
// generotor版本
function sleep(sleepTime){
    return function(cb){
        setTimeout(cb.bind(this), sleepTime);
    }
}
function* genSleep(){
    var t1 = +new Date();
    yield sleep(3000);
    var t2 = +new Date();
    console.log(t2-t1);
}
async(genSleep);
function async(gen){
    const iter = gen();
    function nextStep(it){
        if(it.done) return ;
        if (typeof it.value === "function") {
            it.value(function(ret) {
              nextStep(iter.next(ret))
            })
        } else {
            nextStep(iter.next(it.value));
        }
    }
    nextStep(iter.next());
}
優(yōu)點(diǎn)：跟promise一樣優(yōu)點(diǎn)，代碼變得更簡(jiǎn)單干凈。
缺點(diǎn)：就是每次都要執(zhí)行 next() 顯得很麻煩，雖然有 co（第三方包）可以解決，但就多包了一層，不好看，錯(cuò)誤也必須按 co 的邏輯來(lái)處理，不爽。
co 之所以這么火并不是沒有原因的，當(dāng)然不是僅僅實(shí)現(xiàn) sleep 這么無(wú)聊的事情，而是它活生生的借著generator/yield 實(shí)現(xiàn)了很類似 async/await 的效果！這一點(diǎn)真是讓我三觀盡毀刮目相看。
const co = require("co")
function sleep(sleepTime) {
  return function(cb) {
    setTimeout(cb.bind(this), sleepTime)
  }
}

co(function*() {
  const t1 = +new Date()
  yield sleep(3000)
  const t2 = +new Date()
  console.log(t2 - t1)
})
4、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)
}()
優(yōu)點(diǎn)：同 Promise 和 Generator 優(yōu)點(diǎn)。 Async/Await 可以看做是 Generator 的語(yǔ)法糖，Async 和 Await 相較于 * 和 yield 更加語(yǔ)義，另外各個(gè)函數(shù)都是扁平的，不會(huì)產(chǎn)生多余的嵌套，代碼更加清爽易讀。
缺點(diǎn)：ES7 語(yǔ)法存在兼容性問(wèn)題，有 babel 一切兼容性都不是問(wèn)題
5、開源的版本
在 javascript 優(yōu)雅的寫 sleep 等于如何優(yōu)雅的不優(yōu)雅，這里有 C++ 實(shí)現(xiàn)的模塊：https://github.com/ErikDubbel...
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è)模塊node-sleep。
前端知識(shí)點(diǎn)：Async/Await是目前前端異步書寫最優(yōu)雅的一種方式
二、優(yōu)雅獲取時(shí)間戳
上面實(shí)現(xiàn) sleep 函數(shù)，我們可以發(fā)現(xiàn)代碼有 +new Date()獲取時(shí)間戳的用法，這只是其中的一種，下面就說(shuō)一下其他兩種以及 +new Date()的原理。
1、普通版
var timestamp=new Date().getTime()
優(yōu)點(diǎn)：具有普遍性，大家都用這個(gè)
缺點(diǎn)：應(yīng)該沒有吧
2、進(jìn)階版
var timestamp = (new Date()).valueOf()
valueOf 方法返回對(duì)象的原始值(Primitive,"Null","Undefined","String","Boolean","Number"五種基本數(shù)據(jù)類型之一)，可能是字符串、數(shù)值或 bool 值等，看具體的對(duì)象。
優(yōu)點(diǎn)：說(shuō)明開發(fā)者原始值有一個(gè)具體的認(rèn)知，讓人眼前一亮。
缺點(diǎn): 應(yīng)該沒有吧
3、Date.now()方法
Date.now()
Date.now() 方法返回自1970年1月1日 00:00:00 UTC到當(dāng)前時(shí)間的毫秒數(shù)。類型為Number。因?yàn)?now() 是Date的一個(gè)靜態(tài)函數(shù)，所以必須以 Date.now() 的形式來(lái)使用。
優(yōu)點(diǎn)：簡(jiǎn)單明了。
缺點(diǎn)：兼容性問(wèn)題，ECMA-262 第五版中被標(biāo)準(zhǔn)化。
兼容性不支持時(shí)的兼容性代碼：
if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}
4、終極版
var timestamp = +new Date()
優(yōu)點(diǎn)：對(duì) JavaScript 隱式轉(zhuǎn)換掌握的比較牢固的一個(gè)表現(xiàn)
缺點(diǎn)：應(yīng)該沒有吧
我們來(lái)分析一下，為什么+new Date()拿到的時(shí)間戳？
那就是隱式轉(zhuǎn)換，實(shí)質(zhì)上還是調(diào)用了valueOf()的方法。
注意：
（1）一元+ 運(yùn)算符
一元 + 運(yùn)算符將其操作數(shù)轉(zhuǎn)換為 Number 類型并反轉(zhuǎn)其正負(fù)。注意負(fù)的 +0 產(chǎn)生 -0，負(fù)的 -0 產(chǎn)生 +0。
+new Date() 相當(dāng)于 ToNumber(new Date())
（2）toString 用來(lái)返回對(duì)象的字符串表示。
var obj = {};
console.log(obj.toString());//[object Object]

var arr = [];
console.log(arr.toString());//""空字符串

var date = new Date();        // Tue May 28 2019 22:05:58 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(date.toString());//"Tue May 28 2019 22:05:58 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)"
（3）valueOf()方法返回對(duì)象的原始值
valueOf()方法返回對(duì)象的原始值，可能是字符串，述職或boolean值，看具體的對(duì)象。
var obj = {
  name: "saucxs"
}
console.log(obj.valueOf()) //Object {name: "saucxs"}

var arr1 = [1,3]
console.log(arr1.valueOf()) //[1,3]

var date = new Date()
console.log(date.valueOf())//1456638436303
// 如代碼所示，三個(gè)不同的對(duì)象實(shí)例調(diào)用valueOf返回不同的數(shù)據(jù)
原始值指的是 "Null","Undefined","String","Boolean","Number","Symbol" 6種基本數(shù)據(jù)類型之一，上面已經(jīng)提到過(guò)這個(gè)概念，這里再次申明一下。
最后分解一下其中的過(guò)程：+new Date():    
(1)運(yùn)算符 new 的優(yōu)先級(jí)高于一元運(yùn)算符 +，所以過(guò)程可以分解為：var time=new Date();+time
(2)根據(jù)上面提到的規(guī)則相當(dāng)于：ToNumber(time)
(3)time 是個(gè)日期對(duì)象，根據(jù) ToNumber 的轉(zhuǎn)換規(guī)則，所以相當(dāng)于：ToNumber(ToPrimitive(time))
(4)根據(jù) ToPrimitive 的轉(zhuǎn)換規(guī)則：ToNumber(time.valueOf())，time.valueOf() 就是 原始值 得到的是個(gè)時(shí)間戳，假設(shè) time.valueOf()=1503479124652
(5)所以 ToNumber(1503479124652) 返回值是 1503479124652 這個(gè)數(shù)字。
前端知識(shí)點(diǎn)：隱式轉(zhuǎn)換的妙用
【注：我是saucxs，也叫songEagle，松寶寫代碼，文章首發(fā)于sau交流學(xué)習(xí)社區(qū)（https://www.mwcxs.top），關(guān)注我們每天閱讀更多精彩內(nèi)容】