用各種方式實(shí)現(xiàn)同步for循環(huán)輸出（yeild, await...）

JayChen 發(fā)布于2019-08-22 15:12 / 2468人閱讀

摘要：前段的功能越來(lái)越強(qiáng)大，現(xiàn)在實(shí)現(xiàn)同步的循環(huán)輸出的方式也越來(lái)越多，我們先看一個(gè)例子后輸出相信大家對(duì)這個(gè)比較常見(jiàn)了，原理是因?yàn)槁暶鞯臑榈木植孔兞浚皇嵌〞r(shí)器，他暫時(shí)將內(nèi)部函數(shù)掛起，等到一秒后執(zhí)行，到那個(gè)時(shí)候，已經(jīng)變成了。后續(xù)會(huì)更新，歡迎補(bǔ)充

前段的功能越來(lái)越強(qiáng)大，現(xiàn)在實(shí)現(xiàn)同步的for循環(huán)輸出的方式也越來(lái)越多，我們先看一個(gè)例子：

forF();
function forF() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i);
    }, 1000)
  }
}
// 1s后輸出：3 3 3

相信大家對(duì)這個(gè)比較常見(jiàn)了，原理是因?yàn)関ar聲明的i為forF的局部變量，setTimeout只是定時(shí)器，他暫時(shí)將內(nèi)部函數(shù)掛起，等到一秒后執(zhí)行，到那個(gè)時(shí)候，i已經(jīng)變成了5。

那么我們的解決辦法有哪些呢？

先上一個(gè)es5以前的解決辦法：

forF();
function forF() {
  for (var i = 0; i < 3; i++) {
    outF(i);
  }
}

function outF(i) {
  setTimeout(function () {
    console.log(i);
  }, 1000*i)
}
// 0 1 2

因?yàn)樵谘h(huán)中用了外部函數(shù)，那么相當(dāng)于創(chuàng)建了三個(gè)outF實(shí)例，因?yàn)閕是基本變量，所以每個(gè)實(shí)例的i都是不共享的，這里要注意設(shè)置的定時(shí)器時(shí)間要1000*i;

下面開(kāi)始用es6的方法實(shí)現(xiàn)啦！
1.用塊作用域的let

forF();
function forF() {
  for (let i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i);
    }, 1000*i)
  }
}

因?yàn)閘et是塊作用域的，對(duì)于setTimeout函數(shù)而言，每次循環(huán)都新創(chuàng)建一個(gè)i，每個(gè)i不共享

2.await（其實(shí)是es7的）
見(jiàn)代碼

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("ok");
        }, time);
    })
};
// // 用await實(shí)現(xiàn)循環(huán)輸出數(shù)字
async function awaitF() {
  for (var i = 0; i < 3; i++) {
    await sleep(1000);
    console.log(i)
  }
}
awaitF()
// 0 1 2

await顧名思義是等待，他接受一個(gè)promise對(duì)象，等待他相應(yīng)然后才繼續(xù)執(zhí)行。
注意用await的函數(shù)必須加async關(guān)鍵字
關(guān)于promise，推薦看大白話：https://www.cnblogs.com/lvdab...

3.yeild

function* countAppleSales () {
  for (var i = 0; i < 3; i++) {
    yield;
    console.log(i);
  }
}

var appleStore = countAppleSales(); // Generator { }
appleStore.next();
nextApp(appleStore);
function nextApp(appleStore) {
  setTimeout(function () {
    let done = appleStore.next().done;
    if (!done) {
      nextApp(appleStore);
    }
  }, 1000);
}

yield函數(shù)必須定義成function* 外部在調(diào)用此函數(shù)的時(shí)候必須用next()方法他才會(huì)繼續(xù)執(zhí)行到下個(gè)yeild那里，所以這里用遞歸去執(zhí)行。
關(guān)于yeild的知識(shí)點(diǎn)百度也很多，可自行百度。

后續(xù)會(huì)更新，歡迎補(bǔ)充