您的位置是: > 建網站知識 > 公告通知 >
客服中心

jquery中的對象-deferred

點擊次數:更新時間:2017-02-20 09:41 【打印】【關閉】

今天跟大家分享一個jquery中的對象-deferred。其實早在jquery1.5.0版本中就已經引入這個對象了。不過可能在實際開發過程中用到的并不多,所以沒有太在意。

這里先不說deferred的概念,我們先看一個例子。

還記得初學的時候,遇到一個實例,先是要ajax請求一個接口(a.json),從返回的數據中獲得一個id1值。然后再請求一個接口(b.json)獲得id2,最后需要對這兩個id值同時進行操作。

錯誤解法

那個時候初學,首先想到的方案(現在想想,很傻很天真...)

var id1, id2;$.ajax({
    url: 'a.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
        id1 = d.item.id;
    }});$.ajax({
    url: 'b.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
        id2 = d.item.id;
    }})alert('id1='+id1+','+ 'id2='+ id2);

因為那個時候,還沒有理解異步的概念,所以以為,第二次ajax的時候id已經有值了,但是運行之后才發現,變量id其實根本沒被賦值。

也就是這一刻,我真正明白了:ajax是異步的!!!

傻瓜式解法

發現上面那個方法不能用之后,分析了一下,彈出undefined是因為彈出之前id還沒有被賦值,那我保證在彈出之前給id賦值不就解決了嗎?好的,于是我想到了下面這個方法:

var id1;    $.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
        id1 = d.item.id;
        $.ajax({
            url: '/test/json/b.js',
            dataType: 'json',
            type: 'get',
            success: function(f){
                id2 = f.item.id;
                alert('id1='+id1+','+ 'id2='+ id2);
            }
        });
    }})

 

邏輯雖然正確了,但總覺得怪怪的,如果這里需要嵌套3層呢?4層呢?。。。ajax里面嵌套ajax,如果數據很多,訪問速度慢,嵌套更多層,會導致性能下降、影響用戶體驗、代碼不好維護等等問題。所以一般不推薦這種方法。總之,這種寫法讓我難以接受。

所以思來想去,覺得不妥。。。然后那個時候就在一個前端群里,詢問各種大牛,直到一個大牛告訴我讓我百度一下deferred,后來認真學習了下,覺得不錯。

使用deferred對象

deferred對象簡介

deferred是jquery中的擴展的一個對象(1.5.0以上的版本支持deferred)。defer的意思是"延遲",所以deferred對象的含義就是"延遲"到未來某個點再執行。

簡單說,deferred對象就是jQuery的回調函數解決方案。

再簡單說,deferred對象用來管理異步操作,而ajax就是一種異步操作。

deferred基本語法

deferred讓ajax支持新的寫法,代碼如下:

$.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get'})
.done(function() {
    alert("成功啦!");})
.fail(function() {
    alert("失敗了...");})

 

這個大家應該都知道。現在在編輯器敲入ajax,然后回車,提示的ajax語法結構就是這樣鏈式的寫法。

done函數就是ajax請求成功的回到函數;
fail函數就是ajax請求失敗的回調函數。

使用deferred的解決方法

var ajax1 = $.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get'});var ajax2 = $.ajax({
    url: '/test/json/b.js',
    dataType: 'json',
    type: 'get',});$.when(ajax1,ajax2).done(function(d1,d2){
    var id1 = d1[0].item.id;
    var id2 = d2[0].item.id;
    alert('id1='+id1+',   '+ 'id2='+ id2);}).fail(function(){
    alert('error');});

值得一提的是,上面代碼中done函數的參數,對應的是前面每一個ajax請求返回的數據

 

上面的代碼中,用到了deferred對象的when方法。
它的描述是:

提供一種方法來執行一個或多個對象的回調函數。

這里的ajax1和ajax2就是deferred對象,done和fail就是回調函數。上面代碼的意思是:

只有當兩個ajax請求都成功返回數據時,執行done函數;只要有一個請求不成功,就執行fail函數。

另外值得一提的是:$.when方法的參數,只支持deferred對象,而ajax返回的就是deferred對象。`

這就已經實現了上面的需求了。請求兩個接口,獲得兩個數據,都成功時,對這兩個數據同時進行處理。而且這種鏈式寫法,讓讀者一目了然,而且便于維護擴展。

deferred方法匯總

提到的方法

  • $.Deferred():生成一個deferred對象。

  • $.when() 為多個操作指定回調函數。

  • deferred.done():指定操作成功后的回調函數

  • deferred.fail():指定操作失敗后的回調函數

未提到的方法

  • deferred.resolve()方法和deferred.reject()方法

deferred對象執行回調函數之前會有一個執行狀態的存在,執行狀態一共有三種———未完成、已完成和已失敗。

未完成狀態,則會繼續等待,或者執行progress()指定的回調函數。

已完成狀態,則會執行done()方法指定的回調函數。

已失敗狀態,則會執行fail()方法指定的回調函數。

所以這里的deferred.resolve()方法就是手動將deferred對象的狀態改為已完成,繼而執行done方法; deferred.reject()方法就是手動將狀態改為已失敗,繼而執行fail方法。

下面來看一個例子:

       var defer = $.Deferred(); // 新建一個Deferred對象    var wait = function(defer){
        var tasks = function(){
                defer.resolve();   // 改變Deferred對象為已完成狀態
                alert("執行完畢!");
        };
        setTimeout(tasks,5000);
        return defer;
      };
       $.when(wait(defer))
      .done(function(){
             alert("succeed"); 
        })
      .fail(function(){
        alert("failed"); 
      });

 

結果:等待5秒鐘,先彈出“succeed”,在彈出“執行完畢!”。

分析一下代碼執行過程:

$.when()里面的參數是wait函數,也就是一個deferred對象,所以可以繼續執行setTimeout函數,等待5s,執行tasks函數,然后手動改變了狀態為“已完成”,所以執行done方法,彈出“succeed”,然后彈出“執行完畢!”。

  • deferred.then():有時為了省事,可以把done()和fail()合在一起寫,這就是then()方法。

    function successFun(){
        alert("yes");}function failFun(){
        alert('fail');}$.when($.ajax({
        url: '/test/json/a.js',
        dataType:'json',
        type: 'get'})).then(successFun, failFun);

    當then方法只有一個參數時,相當于done方法。當有兩個參數時,第一個相當于done方法,第二個相當于fail方法。

?

底部線條

7x24小時服務熱線:400-088-0531???13515318674360網站安全檢測平臺

友情鏈接:
魔法元素投注