聊聊javascript裡的sleep()方法

很多程式語言裡都有sleep()，delay()等方法，它能讓我們的程式不那麼急的去執行下一步操作，而是延遲、等待一段時間。軟體開發中常常會遇到需要這樣的函數，例如等待幾分鐘去檢查某一事件是否發生。 JavaScript裡有setTimeout()方法來實作設定一段時間後執行某個任務，但寫法很醜陋，需要提供回呼函數：

setTimeout(function(){ alert("Hello"); }, 3000);

JavaScript Promise API是新出現了一個API，借助Promise，我們可以對setTimeout函數進行改良，以下就是把setTimeout()封裝成一個傳回Promise的sleep()函數。

// https://zeit.co/blog/async-and-await
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

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

你會發現，這種寫法很優雅，很像它程式語言裡的延遲、等待函數。 Promise API讓我們避免傳入回呼函數，我們在實作中也使用了ES6中的箭頭(arrow)函數。

這裡需要提到的一個問題是，這個sleep()在執行的時候是「block」程式的繼續執行的。它不是同步的。如果想讓它同步執行，不妨礙執行之後的程式碼，我們可以使用 async/await 關鍵字。

(async function() {
  console.log('Do some thing, ' + new Date());
  await sleep(3000);
  console.log('Do other things, ' + new Date());
})();

執行結果：

Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)  
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)

你會發現，這次，sleep()並沒有阻礙第二個console的執行。

但 async/await 是ES7中的文法，目前還是處於試驗階段。那現在想用這個 async/await 特性怎麼辦？可以嘗試 google 的一個 JavaScript 預編譯器 traceur，可以將高版本的 JavaScript 編譯為 ES5 程式碼，已經實驗性的支援了 async/await （需要使用 –experimental 來指定開啟）。

推薦教學：《javascript基礎教學》

以上是聊聊javascript裡的sleep()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！