本文實例講述了javascript 函數的暫停和恢復。分享給大家供大家參考，具體如下：

javascript 異步編程從來都是一個難題，最開始我們用 callback，但隨之觸發了回調地獄，于是“發明” Promise 解決 callback 嵌套過深的問題。然而由于濫用 Promise（一連串的 then），代碼變得不易閱讀了。此時，async-await 橫空出世，它讓我們可以用同步的方式編寫異步代碼，簡直 amazing，以至于有人說它就是 javascript 異步編程的銀彈。

P.S.代碼只是演示，并不可用

function getProfile(id) { return window.fetch(`https://api.com/wedding/profile/${weddingId}`}async function getWeddingDetail(weddingId) { try { // 暫停執行 const wedding = await window.fetch(`https://api.com/wedding/${weddingId}`); // 當結果返回恢復執行，接著繼續暫停 const groom = await getProfile(wedding.groomId); // ... 恢復執行 -> 暫停 ... const bride = await getProfile(wedding.brideId); // ... 恢復執行 return { wedding, bride, groom }; } catch (error) { handleError(error); }}

沒有銀彈

然而計算機科學領域中并不存在銀彈。async-await 也有缺點，比如你忘了寫 await，不信？

假設別人編寫了一個工具函數叫getProfile，如果不了解它的具體實現，你是不是就把它當做同步函數，即便getProfile是異步的。

當然，這只是一個小問題，更讓我難受的是，如果你在一個函數中使用了 async，那么調用它的函數也得變成一個 async，若還有另一個函數要調用這個調用函數......holly shit！現在你明白了吧。

有沒有兩全其美的辦法？

// getWeddingDetail 根本不用關心內部的函數是異步or同步function getWeddingDetail(weddingId) { const wedding = window.fetch(`https://api.com/wedding/${weddingId}`); const groom = getProfile(wedding.groomId); const bride = getProfile(wedding.brideId); return { wedding, bride, groom };}

沒有什么是一個中間層解決不了的

異步編程的核心，就是函數暫停和恢復執行。而決定一個函數是暫停還是恢復執行，這是 js 運行時干的活兒，難不成我們今天要深入引擎實現？

No！我不了解 C++，也不懂 js 引擎是如何實現的。

但是呢，我可以寫一個中間層（函數runtime），嘗試實現上面的需求，當然，這會有一些限制。

一、入口函數

假設要運行的函數如下：

function main() { const id = 123; console.log(’Getting wedding:’, id); const { wedding, bride, groom } = getWeddingDetail(id); console.log(’Wedding detail:’, wedding);}

我們期望能夠按照下面的方式運行：

function runtime(mainFn) { mainFn();}// start runtimeruntime(main);

基本框架已經有了，接著干啥？

首先，要搞清楚在不用 await 的前提下，如何中斷函數運行。

然后，在合適的地方恢復執行。

js 中有兩種方法中斷函數運行：return和throw。我選擇 throw，因為它表示遭遇異常導致的中斷。好了，我們改造一下 runtime

function runtime(mainFn) { const _originalFetch = window.fetch; window.fetch = (url, options) => { // '暫停' throw new Error(); }; // 運行入口函數 runMain(); function runMain() { try { mainFn(); } catch (error) { // 函數 '暫停' // 恢復并重新執行 mainFn runMain(); } }}

先忽略這段代碼出現的問題，把目光聚集在函數“中斷”“恢復”這兩個點上，顯然，目的已經達到。接下來對它進行優化。

首當其沖的是 runMain，只需要當 window.fetch 成功后再執行：

function runtime(mainFn) { const _originalFetch = window.fetch window.fetch = (url, options) => { _originalFetch(url, options).then(res => { // 返回結果后恢復執行 runMain() }) throw new Error() } runMain(); function runMain() { try { mainFn(); } catch (error) { // ignore } }}

window.fetch 每次拋出異常，這導致 mainFn 無限循環的執行。

要解決這個問題，需要引入緩存，使得我們僅需要在第一次 fetch 時拋出異常，而為后面的請求返回響應。

function runtime(mainFn) { const _originalFetch = window.fetch windo.fetch = (url, options) => { if (cache.has([url, options])) return cache.get([url, options]) _originalFetch(url, options).then(res => { cache.set([url, options], res) runMain() }) throw new Error() } runMain(); function runMain() { try { mainFn(); } catch (error) { // ignore } }}

成功啦！

運行程序，檢查 console 的輸出，由于重復運行了多次，’Getting wedding:’, 123也被顯示了多次，這是 console.log 的副作用導致的。

二、純函數

runtime 只允許運行純函數，如果你的代碼中有副作用，則必須添加限制條件：runSideEffects().

function main() { const id = 123; runSideEffects(() => console.log(’Getting wedding:’, id)); const { wedding, bride, groom } = getWeddingDetail(id); runSideEffects(() => console.log(’Wedding detail:’, wedding));}

sideEffects 的實現非常容易：

function runtime(mainFn) { // 參考上面的代碼 // 提供 `runSideEffects` const sideEffects = []; window.runSideEffects = fn => { sideEffects.push(fn); }; runMain(); function runMain() { try { mainFn(); sideEffects.forEach(fn => fn()); } catch (error) { // 清除副作用 sideEffects.splice(0, sideEffects.length); } } }

再次運行，’Getting wedding:’, 123只顯示一次啦~

到底干了些啥？

為了模仿函數暫停和恢復，我們通過 throw 一個錯誤來“暫停”函數，重新運行來“恢復”函數。

為了從暫停處“恢復”，需要將拋出的錯誤替換成函數返回值，我們用緩存機制達到了這個目的。

最后，為了能安全的重復執行函數，需要將它轉化為一個純函數。如果有副作用，則將它們收集起來，在函數運行成功后，再執行副作用。

扯這么多，有什么實際用途？

本文的靈感來自于React Suspense。有了 Suspense，就可以像下面這樣來獲取數據：

function Component() { const data = getDataFromNetwork(); return <div />;}

getDataFromNetwork 將發起異步請求，所以它是一個異步函數，但 React 讓它看來是是一個同步操作。這很有趣~

原文閱讀：pause-and-resume-a-javascript-function

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。