javascript的非同步編程解決方案收集

標籤：迴圈   分析   pre   順序   chrome   node.js   time   ...   new   

緣起

沒理解js非同步同學看下面的例子：

for (var i = 0; i < 5; i++) {
　　//類比一個非同步作業  setTimeout(() => {    console.log(i);  }, 1000);}

我們想要的結果是：0,1,2,3,4

結果卻出乎意料：5,5,5,5,5

分析

js的特點就是單線程非同步非堵塞。需要好好理解這句話：js對於非同步作業，不會停下來等待上一個非同步作業完成，才進行下一個非同步作業。

如果要達到順序執行，只能用回調：也就是上一個非同步作業完成時，再調用下一個非同步作業。

要是如上面的迴圈，要如何操作呢？

解決方案1

通過調用自身解決迴圈的回調嵌套問題

function sync(i) {  setTimeout(() => {    if (i < 5){      console.log(i);      i++;      sync(i);    }  }, 1000);}sync(0)

解決方案2

使用await/async

優點：直觀，符合約步編程思維。其實本質還是非同步回調

缺點：大部分瀏覽器下載還不支援。需要配合Promise使用，需要寫成兩個函數

伺服器端node.js支援。以下代碼在最新版chrome瀏覽器中可以運行：

const f = (i) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve(i);    }, 1000);  });};const testAsync = async () => {  for (var i = 0; i < 5; i++) {    const t = await f(i);    console.log(t);  }};testAsync();

解決方案3

等待補充...

 

 

javascript的非同步編程解決方案收集