JavaScript從初級往高級走系列————異步

andot 發布于2019-08-23 13:46 / 2567人閱讀

摘要：之所以是單線程，取決于它的實際使用，例如不可能同添加一個和刪除這個，所以它只能是單線程的。所以，這個新標準并沒有改變單線程的本質。

原文博客地址：https://finget.github.io/2018/05/21/async/

異步

什么是單線程，和異步有什么關系

什么是event-loop

是否用過jQuery的Deferred

Promise的基本使用和原理

介紹一下async/await(和Promise的區別、聯系)

異步解決方案

什么是單線程，和異步有什么關系

單線程-只有一個線程，只做一件事。JS之所以是單線程，取決于它的實際使用，例如JS不可能同添加一個DOM和刪除這個DOM，所以它只能是單線程的。

console.log(1);
alert(1);
console.log(2);

上面這個例子中，當執行了alert(1),如果用戶不點擊確定按鈕，console.log(2)是不會執行的。

為了利用多核CPU的計算能力，HTML5提出WebWorker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

js異步

console.log(100);
setTimeout(function(){
  console.log(200);
},1000)
console.log(300);
console.log(400);
console.log(400);
.... // 這里來很多很多個console.log(400); 結果就是打印完所有的400，等一秒再打印200

event-loop

文字解釋

事件輪詢，JS實現異步的具體解決方案

同步代碼，直接執行

異步函數先放在異步隊列中

待同步函數執行完畢，輪詢執行異步隊列的函數

上面那個例子的執行效果就是這樣的：

實例分析：

這個例子中有兩種情況，取決于ajax的返回時間，如果ajax時間小于100ms它就先放進異步隊列

Jquery Deferred Jquery1.5前后的變化

var ajax = $.ajax({
  url: "data.json",
  success: function(){
    console.log("success1");
    console.log("success2");
    console.log("success3");
  },
  error: function(){
    console.log("error");
  }
})

console.log(ajax); // 返回一個xhr對象

// 鏈式操作
var ajax = $.ajax("data.json");
ajax.done(function(){
  console.log("success1");
}).fail(function(){
  console.log("error");
}).done(function(){
  console.log()
})

console.log(ajax); // 返回一個deferred對象

無法改變JS異步和單線程的本質

只能從寫法上杜絕callback這種形式

它是一種語法糖形式，但是解耦了代碼

很好的體現：開放封閉原則（對擴展開放，對修改封閉）

使用Jquery Deferred

// 給出一段非常簡單的異步操作代碼，使用setTimeout函數
var wait = function(){
  var task = function(){
    console.log("執行完成)
  }
  setTimeout(task, 2000);
}
wait();

新增需求：要在執行完成之后進行某些特別復雜的操作，代碼可能會很多，而且分好幾個步驟

function waitHandle(){
  var dtd = $.Deferred(); // 創建一個deferred對象
  
  var wait = function(dtd){ // 要求傳入一個deferred對象
    var task = function(){
      console.log("執行完成");
      dtd.resolve(); // 表示異步任務已經完成
      // dtd.reject(); // 表示異步任務失敗或出錯
    }
    setTimeout(task, 2000);
    return dtd; // 要求返回deferred對象
  }
  
  // 注意，這里一定要有返回值
  return wait(dtd);
}

var w = waitHandle();
w.then(function(){
  console.log("ok 1");
}, function(){
  console.log("err 1");
}).then(function(){
  console.log("ok 2");
}, function(){
  console.log("err 2");
})

當執行dtd.reject()時：

var w = waitHandle();
w.then(function(){
  console.log("ok 1");
}, function(){
  console.log("err 1");
})
// 不能鏈式
w.then(function(){
  console.log("ok 2");
}, function(){
  console.log("err 2");
})

上面封裝的waitHandle方法,由于直接返回了dtd（deferred對象），所以用戶可以直接調用w.reject()方法，導致無論是成功還是失敗，最后都走失敗。

// 修改
function waitHandle(){
  var dtd = $.Deferred();
  var wait = function(dtd){
    var task = function(){
      console.log("執行完成");
      dtd.resolve(); 
    }
    setTimeout(task, 2000);
    return dtd.promise(); // 注意這里返回的是promise，而不是直接返回deferred對象
  }
  return wait(dtd);
}

ES6的Promise：點這里

// promise封裝一個異步加載圖片的方法
function loadImg(src) {
  var promise = new Promise(function(resolve,reject){
    var img = document.createElement("img");
    img.onload = function(){
      resolve(img)
    }
    img.onerror = function(){
      reject("圖片加載失敗")
    }
    img.src = src;
  })
  return promise;
}

async/await

這是ES7提案中的，現在babel已經開始支持了，koa也是用async/await實現的。

then 只是將callback拆分了

async/await 是最直接的同步寫法

// 偽代碼
const load = async function(){
  const result1 = await loadImg(src1);
  console.log(result1);
  const result2 = await loadImg(src2);
  console.log(result2);
}
load();

最后

創建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！

GPU云服務器云服務器從電腦往u盤下載視頻怎么轉碼阿里云的服務器從公賬怎么走 javascript初級入門 javascript初級教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99515.html

JavaScript從初級往高級走系列————prototype

摘要：原文博客地址另一篇轉載的從初級往高級走系列原型定義原型是對象的一個屬性，它定義了構造函數制造出的對象的公共祖先。原文博客地址：https://finget.github.io/2018/09/13/proto/另一篇轉載的JavaScript從初級往高級走系列————prototype 原型定義：原型是function對象的一個屬性，它定義了構造函數制造出的對象的公共祖先。通...

SKYZACK 2019-08-23 13:45 評論0 收藏0
JavaScript從初級往高級走系列————MVVM-Vue

摘要：原文博客地址如何理解如何實現是否解讀過的源碼與框架的區別實現實現獨立初始化實例兩者的區別數據和視圖的分離，解耦開放封閉原則，對擴展開放，對修改封閉在中在代碼中操作視圖和數據，混在一塊了以數據驅動視圖，只關心數據變化，原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何實現 MVVM 是否解讀過 ...

codercao 2019-08-23 13:46 評論0 收藏0
JavaScript從初級往高級走系列————Virtual Dom

摘要：當中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如。則就叫稱為重繪。原文博客地址：https://finget.github.io/2018/05/22/virtualDom/ 什么是虛擬DOM 用JS模擬DOM結構 DOM變化的對比，放在JS層來做（圖靈完備語言）提高重繪性能重繪和回流頁面渲染過程：showImg(https://seg...

tinyq 2019-08-23 13:45 評論0 收藏0
JavaScript從初級往高級走系列————ES6

摘要：采用二八定律，主要涉及常用且重要的部分。對象是當前模塊的導出對象，用于導出模塊公有方法和屬性。箭頭函數函數箭頭函數把去掉，在與之間加上當我們使用箭頭函數時，函數體內的對象，就是定義時所在的對象，而不是使用時所在的對象。 ES6 原文博客地址：https://finget.github.io/2018/05/10/javascript-es6/ 現在基本上開發中都在使用ES6，瀏覽器環境...

孫淑建 2019-08-23 13:45 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0