jQuery的異步機制

defcon 發布于2019-08-21 10:22 / 3206人閱讀

摘要：我們可以在程序的運行過程中根據檢測到的狀態來決定之后哪些回調函數會被執行。

異步方式的概述

通過事件達到異步操作

通過我們最熟悉的回調

類promise的方式

首先我們注意到1.5版本前后的jquery有一個重要的不同

//before 1.5
var option={
    type:"GET",
    url:"...",
    success:function(){..},
    fail:function(){..},
    complete:function(){..}
}；
$.ajax(option);
//after 1.5
$.ajax(option)
    .done(function(){..})
    .fail(function(){..})
    .progress(function(){..})
    .always(function(){..})

1.5版本之后變成了優美的鏈式調用，并且可以對同一事件增加多個回調函數，原因是原生的xhr對象換成了jqxhr對象，里面有什么魔法呢？

從promise講起

promise在javascript編程世界里可以說是大名鼎鼎，下面這段代碼給出了它的簡單用法。

promise(function(){..}).
then([successhandler1,successhandler2,..],
     [failhandler1,failhandler2,...]);

promise為我們呈現出了異步編程的一種新模式，但它還不夠漂亮，接下來我們看一看jQuery引入的deferred。

jQuery的Deferred 創建Deferred對象

var de=$.Deferred();//空的Deferred對象
$.Deferred(function(){..}).
  done(function(){..});
//會直接執行里面的function并返回一個Deferred對象
function tmp(defer){
    ....
    return defer;
};//這個寫法的含義我們留在后面再講

Deferred的機理

我們可以這樣想，每個deferred對象內部有一個隱藏著的狀態變量，有成功、失敗、執行中三種狀態，當程序執行成功則會把它設為成功，否則設為失敗。這里的成功失敗指的是滿足某種設定條件，并非一般意義上的出錯，即使拋出異常也不認為其失敗。我們可以在程序的運行過程中根據檢測到的狀態來決定之后哪些回調函數會被執行。

設定狀態實例

$(function(){
    ....
    if(..) this.resolve(arg1,arg2,..);
    //會執行done和always回調，args是傳入回調的參數
    //同類函數this.resolveWith(content,[args..]);content作為回調函數中的this
    else this.reject(arg1,arg2,..);
    //執行fail和always回調，rejectWith基本同上
    //需要注意的是always也必須狀態改變才能調用，若一直處于執行狀態，也不會調用
    ....
    this.notify(args);//調用progress回調，但必須在狀態變為成功或失敗前發起，這里progress不會被調用
    //notifyWith基本同上
}).fail(..).done(..).progress(..);

還需要注意的是，即使狀態發生改變了，程序還會繼續運行。這里所說的成功失敗指的是滿足我們設定的條件與否，和程序真的運行狀態無關，done、fail、always返回的依然是原本的deferred對象。

請記住無論什么回調都是在函數執行完后調用，函數執行不會被中斷

最后還要注意一點未防止狀態在程序外部被更改，應該加上一句
$.Deferred(function(){..}).promise().done(..).fail(..);
但promise返回的不再是原本的Deferred對象了，也不能在外部更改其狀態了。

強勁的when

看到這里我們可能有一個疑問，如果我們有一系列任務來決定后來的回調怎么辦，不用擔心我們有when。

$.when(defer1,defer2...);
//這時候如果每個defer還要$(func(){..})就很難寫了，所以就回到我們開始介紹的最后一種，利用函數返回
var defer1=$.Deferred();
var defer2=$.Deferred();
function func1(defer){...return defer;}
function func2(defer){...return defer;}
$.when(func1(defer1),func2(defer2)).done(..).fail(..);
//當全部defer成功done才會被調用，有一個defer失敗fail就會調用，但無論怎樣一個回調函數最多被調用一次，且不會影響所有函數的執行
var tmp=9;
$.when(tmp).done(..).fail(..);
//當when鏈里面全部不是defer變量時會直接執行done回調，注意是全部，有defer變量會跳過非defer，回調取決于defer

GPU云服務器云服務器異步機制 JavaScript異步機制異步模塊加載機制-amd jquery異步

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

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

異步操作（一）概述

摘要：回調函數指定了下一步操作。異步操作的流程控制參數為秒后返回結果上面代碼的函數是一個異步任務，非常耗時，每次執行需要秒才能完成，然后再調用回調函數。單線程模型同步任務和異步任務任務隊列和事件循環異步操作的模式回調函數事件監聽發布/訂閱異步操作的流程控制串行執行并行執行并行與串行的結合 1.單線程模型指的是js只在線程運行，一個時間執行一個任務，其他任務排隊。事實上是一個運行腳本的主線程...

wemall 2019-08-26 10:13 評論0 收藏0
javascript異步編程詳解

摘要：在服務器端，異步模式甚至是唯一的模式，因為執行環境是單線程的，如果允許同步執行所有請求，服務器性能會急劇下降，很快就會失去響應。第三是，捕捉不到他的錯誤異步編程方法回調函數這是異步編程最基本的方法。前言你可能知道，Javascript語言的執行環境是單線程（single thread）。所謂單線程，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面...

huangjinnan 2019-08-20 10:48 評論0 收藏0
JavaScript 異步機制及應用入門教程

摘要：異步與同步技術研究概念介紹異步簡寫同步簡寫用比方來比喻異步就是個人同時起跑起點和出發時間相同在起跑時不去關心其他人會啥時候跑完尼瑪這不廢話嗎大家都才起跑怎么知道別人多就跑完同步就是個人接力跑起點和出發時間不同且后一個人會等待前一個人跑完才能 1. 異步與同步技術研究 (1). 概念介紹異步: asynchronous 簡寫async 同步: synchronous 簡寫syn...

BoYang 2019-08-21 10:34 評論0 收藏0
異步

摘要：在異步機制中，任務隊列就是用來維護異步任務回調函數的隊列。四對象對象是工作組提出的一種規范，目的是為異步編程提供統一接口。異步 1.JavaScript單線程的理解 Javascript語言的執行環境是單線程（single thread）。所謂單線程，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面一個任務，以此類推。 2.JavaScript單線...

goji 2019-08-23 13:54 評論0 收藏0
再談JavaScript模塊化

摘要：應用日益復雜，模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長，懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個，回調函數的參數必定非常多這就是傳說中的簡述緣起模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元。模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...

MorePainMoreGain 2019-08-26 10:14 評論0 收藏0