獲取JavaScript異步函數(shù)的返回值
今天研究一個(gè)小問題: 怎么拿到JavaScript異步函數(shù)的返回值?
1.錯(cuò)誤嘗試
當(dāng)年未入行時(shí),我的最初嘗試:
<script> function getSomething() { var r = 0; setTimeout(function() { r = 2; }, 10); return r; } function compute() { var x = getSomething(); alert(x * 2); } compute(); </script>
2.回調(diào)函數(shù)
彈出的不是4,而是0,后來知道這是異步的問題,
要用回調(diào)技術(shù)來做:
<script> function getSomething(cb) { var r = 0; setTimeout(function() { r = 2; cb(r); }, 10); } function compute(x) { alert(x * 2); } getSomething(compute); </script>
3.promise
回調(diào)函數(shù)真是個(gè)好東西,然后一直這么寫代碼寫了很久。遇到異步就傳函數(shù)?。『髞砦抑烙衟romise這一個(gè)東西,專門解決由于回調(diào)函數(shù)引起的問題,又學(xué)會了promise:
<script> function getSomething() { var r = 0; return new Promise(function(resolve) { setTimeout(function() { r = 2; resolve(r); }, 10); }); } function compute(x) { alert(x * 2); } getSomething().then(compute); </script>
promise仍然沒有放棄回調(diào),只是回調(diào)的位置發(fā)生了改變。
4.generator
再后來我又學(xué)會了generator,知道其有中斷函數(shù)執(zhí)行的能力,又做了新的嘗試:
<script> function getSomething() { var r = 0; setTimeout(function() { r = 2; it.next(r); }, 10); } function *compute(it) { var x = yield getSomething(); alert(x * 2); } var it = compute(); it.next(); </script>
同步的寫法,能實(shí)現(xiàn)異步的邏輯,感覺高大上了很多。
5.promise + generator
后來又聽說promise加generator,才是異步的完美方式,趕緊用高射炮打蚊子(這個(gè)例子,還不足以說出二者在一起用的好處):
<script> function getSomething() { var r = 0; return new Promise(function(resolve) { setTimeout(function() { r = 2; resolve(r); }, 10); }); } function *compute() { var x = yield getSomething(); alert(x * 2); } var it = compute(); it.next().value.then(function(value) { it.next(value); }); </script>
6.async
心想這算是夠的吧,后來又聽說es7給出了終極方案:async。
作為愛學(xué)習(xí)的少年,心想自己不能被落下:
<script> function getSomething() { var r = 0; return new Promise(function(resolve) { setTimeout(function() { r = 2; resolve(r); }, 10); }); } async function compute() { var x = await getSomething(); alert(x * 2); } compute(); </script>
到這里終于長出了一口氣。
后記:
上面所有的例子,在最新chrome上都可以運(yùn)行。一個(gè)個(gè)小例子,點(diǎn)了點(diǎn)幾個(gè)名詞。
當(dāng)然也只是“點(diǎn)”而已,如果能提供讀者深入學(xué)習(xí)相關(guān)知識點(diǎn)的一個(gè)trigger,那么老姚就心滿意足了。
以上就是老姚童鞋給我們分享的全部內(nèi)容了,希望對大家理解JavaScript異步函數(shù)能夠有所幫助
相關(guān)文章
javascript移動(dòng)開發(fā)中touch觸摸事件詳解
這篇文章主要為大家詳細(xì)介紹了javascript移動(dòng)開發(fā)中touch觸摸事件,感興趣的小伙伴們可以參考一下2016-03-03JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng)并且是橫屏狀態(tài)下
這篇文章主要介紹了JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng) 并且是橫屏狀態(tài)下,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08前端項(xiàng)目中正確插入圖片的不同方法和技術(shù)
本文詳細(xì)介紹了在前端項(xiàng)目中插入圖片的不同方法,包括HTML標(biāo)簽、CSS樣式、JavaScript動(dòng)態(tài)加載以及圖片的性能優(yōu)化,其中涉及到的技術(shù)包括響應(yīng)式圖片設(shè)計(jì)、圖片懶加載技術(shù)和圖片格式選擇等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10詳解實(shí)現(xiàn)一個(gè)通用的“劃詞高亮”在線筆記功能
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)通用的“劃詞高亮”在線筆記文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06JavaScript實(shí)現(xiàn)沿五角星形線擺動(dòng)的小圓實(shí)例詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)沿五角星形線擺動(dòng)的小圓實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JavaScript?canvas實(shí)現(xiàn)字符雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實(shí)現(xiàn)字符雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JS實(shí)現(xiàn)的網(wǎng)頁上的顏色拾色器
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁上的顏色拾色器,需要的朋友可以參考下2016-04-04