獲取JavaScript異步函數(shù)的返回值
今天研究一個小問題: 怎么拿到JavaScript異步函數(shù)的返回值?
1.錯誤嘗試
當年未入行時,我的最初嘗試:
<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ù)真是個好東西,然后一直這么寫代碼寫了很久。遇到異步就傳函數(shù)??!后來我知道有promise這一個東西,專門解決由于回調(diào)函數(shù)引起的問題,又學會了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
再后來我又學會了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>
同步的寫法,能實現(xiàn)異步的邏輯,感覺高大上了很多。
5.promise + generator
后來又聽說promise加generator,才是異步的完美方式,趕緊用高射炮打蚊子(這個例子,還不足以說出二者在一起用的好處):
<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。
作為愛學習的少年,心想自己不能被落下:
<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上都可以運行。一個個小例子,點了點幾個名詞。
當然也只是“點”而已,如果能提供讀者深入學習相關(guān)知識點的一個trigger,那么老姚就心滿意足了。
以上就是老姚童鞋給我們分享的全部內(nèi)容了,希望對大家理解JavaScript異步函數(shù)能夠有所幫助
相關(guān)文章
javascript移動開發(fā)中touch觸摸事件詳解
這篇文章主要為大家詳細介紹了javascript移動開發(fā)中touch觸摸事件,感興趣的小伙伴們可以參考一下2016-03-03JS實現(xiàn)懸浮球只在一側(cè)滑動并且是橫屏狀態(tài)下
這篇文章主要介紹了JS實現(xiàn)懸浮球只在一側(cè)滑動 并且是橫屏狀態(tài)下,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08javascript+css實現(xiàn)俄羅斯方塊小游戲
這篇文章主要為大家詳細介紹了javascript+css實現(xiàn)俄羅斯方塊小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07JavaScript?canvas實現(xiàn)字符雨效果
這篇文章主要為大家詳細介紹了JavaScript?canvas實現(xiàn)字符雨效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06