欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

獲取JavaScript異步函數(shù)的返回值

 更新時(shí)間:2024年07月10日 16:47:10   作者:老姚  
本文給大家分享的是如何解決獲取JavaScript異步函數(shù)返回值的經(jīng)歷及最后的解決方法,有需要的小伙伴可以參考下

今天研究一個(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ù)!!后來我知道有promise這一個(gè)東西,專門解決由于回調(diào)函數(shù)引起的問題,又學(xué)會(huì)了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é)會(huì)了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>

到這里終于長(zhǎng)出了一口氣。

后記:

上面所有的例子,在最新chrome上都可以運(yùn)行。一個(gè)個(gè)小例子,點(diǎn)了點(diǎn)幾個(gè)名詞。

當(dāng)然也只是“點(diǎn)”而已,如果能提供讀者深入學(xué)習(xí)相關(guān)知識(shí)點(diǎn)的一個(gè)trigger,那么老姚就心滿意足了。

以上就是老姚童鞋給我們分享的全部?jī)?nèi)容了,希望對(duì)大家理解JavaScript異步函數(shù)能夠有所幫助

相關(guān)文章

  • javascript移動(dòng)開發(fā)中touch觸摸事件詳解

    javascript移動(dòng)開發(fā)中touch觸摸事件詳解

    這篇文章主要為大家詳細(xì)介紹了javascript移動(dòng)開發(fā)中touch觸摸事件,感興趣的小伙伴們可以參考一下
    2016-03-03
  • JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng)并且是橫屏狀態(tài)下

    JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng)并且是橫屏狀態(tài)下

    這篇文章主要介紹了JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng) 并且是橫屏狀態(tài)下,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08
  • 前端項(xiàng)目中正確插入圖片的不同方法和技術(shù)

    前端項(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è)通用的“劃詞高亮”在線筆記功能

    這篇文章主要介紹了實(shí)現(xiàn)一個(gè)通用的“劃詞高亮”在線筆記文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲

    javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲

    這篇文章主要為大家詳細(xì)介紹了javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • JavaScript實(shí)現(xiàn)沿五角星形線擺動(dòng)的小圓實(shí)例詳解

    JavaScript實(shí)現(xiàn)沿五角星形線擺動(dòng)的小圓實(shí)例詳解

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)沿五角星形線擺動(dòng)的小圓實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • JavaScript?canvas實(shí)現(xiàn)字符雨效果

    JavaScript?canvas實(shí)現(xiàn)字符雨效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實(shí)現(xiàn)字符雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • JS實(shí)現(xiàn)的網(wǎng)頁(yè)上的顏色拾色器

    JS實(shí)現(xiàn)的網(wǎng)頁(yè)上的顏色拾色器

    這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上的顏色拾色器,需要的朋友可以參考下
    2016-04-04
  • 15 個(gè) JavaScript Web UI 庫(kù)

    15 個(gè) JavaScript Web UI 庫(kù)

    本文介紹了 15 個(gè)非常強(qiáng)大的 JavaScript Web UI 庫(kù),非常適合各種各種規(guī)模的富 Web 應(yīng)用的開發(fā)。
    2010-05-05
  • uniapp微信小程序多環(huán)境配置以及使用教程

    uniapp微信小程序多環(huán)境配置以及使用教程

    前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05

最新評(píng)論