javascript 函數(shù)的暫停和恢復(fù)實例詳解
本文實例講述了javascript 函數(shù)的暫停和恢復(fù)。分享給大家供大家參考，具體如下：
javascript 異步編程從來都是一個難題，最開始我們用 callback，但隨之觸發(fā)了回調(diào)地獄，于是“發(fā)明” 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 {
// 暫停執(zhí)行
const wedding = await window.fetch(`https://api.com/wedding/${weddingId}`);
// 當結(jié)果返回恢復(fù)執(zhí)行，接著繼續(xù)暫停
const groom = await getProfile(wedding.groomId);
// ... 恢復(fù)執(zhí)行 -> 暫停 ...
const bride = await getProfile(wedding.brideId);
// ... 恢復(fù)執(zhí)行
return { wedding, bride, groom };
} catch (error) {
handleError(error);
}
}
沒有銀彈
然而計算機科學(xué)領(lǐng)域中并不存在銀彈。async-await 也有缺點，比如你忘了寫 await，不信？
假設(shè)別人編寫了一個工具函數(shù)叫g(shù)etProfile，如果不了解它的具體實現(xiàn)，你是不是就把它當做同步函數(shù)，即便getProfile是異步的。
當然，這只是一個小問題，更讓我難受的是，如果你在一個函數(shù)中使用了 async，那么調(diào)用它的函數(shù)也得變成一個 async，若還有另一個函數(shù)要調(diào)用這個調(diào)用函數(shù)......holly shit！現(xiàn)在你明白了吧。
有沒有兩全其美的辦法？
// getWeddingDetail 根本不用關(guān)心內(nèi)部的函數(shù)是異步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 };
}
沒有什么是一個中間層解決不了的
異步編程的核心，就是函數(shù)暫停和恢復(fù)執(zhí)行。而決定一個函數(shù)是暫停還是恢復(fù)執(zhí)行，這是 js 運行時干的活兒，難不成我們今天要深入引擎實現(xiàn)？
No！我不了解 C++，也不懂 js 引擎是如何實現(xiàn)的。
但是呢，我可以寫一個中間層（函數(shù)runtime），嘗試實現(xiàn)上面的需求，當然，這會有一些限制。
一、入口函數(shù)
假設(shè)要運行的函數(shù)如下：
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 runtime
runtime(main);
基本框架已經(jīng)有了，接著干啥？
首先，要搞清楚在不用 await 的前提下，如何中斷函數(shù)運行。
然后，在合適的地方恢復(fù)執(zhí)行。
js 中有兩種方法中斷函數(shù)運行：return和throw。我選擇 throw，因為它表示遭遇異常導(dǎo)致的中斷。好了，我們改造一下 runtime
function runtime(mainFn) {
const _originalFetch = window.fetch;
window.fetch = (url, options) => {
// "暫停"
throw new Error();
};
// 運行入口函數(shù)
runMain();
function runMain() {
try {
mainFn();
} catch (error) {
// 函數(shù) "暫停"
// 恢復(fù)并重新執(zhí)行 mainFn
runMain();
}
}
}
先忽略這段代碼出現(xiàn)的問題，把目光聚集在函數(shù)“中斷”“恢復(fù)”這兩個點上，顯然，目的已經(jīng)達到。接下來對它進行優(yōu)化。
首當其沖的是 runMain，只需要當 window.fetch 成功后再執(zhí)行：
function runtime(mainFn) {
const _originalFetch = window.fetch
window.fetch = (url, options) => {
_originalFetch(url, options).then(res => {
// 返回結(jié)果后恢復(fù)執(zhí)行
runMain()
})
throw new Error()
}
runMain();
function runMain() {
try {
mainFn();
} catch (error) {
// ignore
}
}
}
window.fetch 每次拋出異常，這導(dǎo)致 mainFn 無限循環(huán)的執(zhí)行。
要解決這個問題，需要引入緩存，使得我們僅需要在第一次 fetch 時拋出異常，而為后面的請求返回響應(yīng)。
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 的輸出，由于重復(fù)運行了多次，'Getting wedding:', 123也被顯示了多次，這是 console.log 的副作用導(dǎo)致的。
二、純函數(shù)
runtime 只允許運行純函數(shù)，如果你的代碼中有副作用，則必須添加限制條件：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 的實現(xiàn)非常容易：
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只顯示一次啦~
到底干了些啥？
為了模仿函數(shù)暫停和恢復(fù)，我們通過 throw 一個錯誤來“暫停”函數(shù)，重新運行來“恢復(fù)”函數(shù)。
為了從暫停處“恢復(fù)”，需要將拋出的錯誤替換成函數(shù)返回值，我們用緩存機制達到了這個目的。
最后，為了能安全的重復(fù)執(zhí)行函數(shù)，需要將它轉(zhuǎn)化為一個純函數(shù)。如果有副作用，則將它們收集起來，在函數(shù)運行成功后，再執(zhí)行副作用。
扯這么多，有什么實際用途？
本文的靈感來自于React Suspense。有了 Suspense，就可以像下面這樣來獲取數(shù)據(jù)：
function Component() {
const data = getDataFromNetwork();
return <div />;
}
getDataFromNetwork 將發(fā)起異步請求，所以它是一個異步函數(shù)，但 React 讓它看來是是一個同步操作。這很有趣~
原文閱讀：pause-and-resume-a-javascript-function
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要給阿加介紹了關(guān)于JS中一些高效的魔法運算符，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JavaScript實現(xiàn)拖動對話框效果的實現(xiàn)代碼
這篇文章主要介紹了JavaScript實現(xiàn)拖動對話框效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細介紹了bootstrap模態(tài)框示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄猨avascript運算符——邏輯運算符詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript實現(xiàn)動態(tài)表格的方法詳解
這篇文章主要為大家介紹了JavaScript實現(xiàn)動態(tài)表格的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹js實現(xiàn)頁面跳轉(zhuǎn)重定向的幾種方式,需要的朋友可以參考下2014-05-05
JS常見問題在開發(fā)過程中會經(jīng)常遇到過，本文整理了一些實際開發(fā)中存在的問題，曬出來與大家一起分享，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了js中位運算的運用實例分析,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS常見面試試題,總結(jié)分析了javascript去重、遍歷、閉包、繼等相關(guān)算法與操作技巧,需要的朋友可以參考下2019-08-08
本文總結(jié)了javascript中的六種迭代器的使用實例，分別是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器，有需要的小伙伴們可以參考借鑒。2016-08-08