jquery高級應用之Deferred對象

tianren124 發布于2019-08-30 13:05 / 1559人閱讀

摘要：中的對象很好的解決了這個問題。每一個對象都可以設置三種狀態進行中已經正確執行執行失敗關于，還有更多需要了解的地方，我這里只是拋磚引玉。的對象就是對模式的一個很好的實現案例。我們通過一個簡單的例子來看看對象應該如何使用。

在實際開發中常常遇到這樣的問題：B函數中需要用到的變量或者參數，只有等A函數執行完畢了才能獲取到。比如A函數中有一個ajax請求，而B函數中所需要的position變量需要在A函數中ajax請求完成才能得到它的準確值。

function A() {
    $.ajax({
        url: "/api/test",
        type: "POST",
        data: {...},
        success: function(res) {
            position = res.position;
        }
    })
}

function B() {
    $(".test").text(position);
}

JavaScript的異步模式讓B函數不會等待A函數計算出了position的值才會執行，它會不等待A函數的結果而直接開始執行，這樣就會造成position無法正確賦值。為了解決這個問題，我們很容易想到使用回調函數，這也是最常用的方法之一

function A(callback) {
    $.ajax({
        url: "/api/test",
        type: "POST",
        data: {...},
        success: function(res) {
            position = res.position;
            callback && callback();
        }
    })
}

function B() {
    $(".test").text(position);
}

A函數有了回調之后，就可以將B函數當做回調函數傳遞給A

A(B);

可是如果這個時候，還有一個C函數，依賴于B的執行結果呢，后面甚至有可能出現一個D函數，依賴于C的結果！又如我們常用的ajax，成功了會有一個回調函數，失敗了還有一個回調函數，面對這樣復雜的情況，我們應該怎么樣處理？雖然使用回調函數依然能夠搞定這些煩人的難題，但是很顯然這并不是一個好的解決辦法。

jquery中的Deferred對象很好的解決了這個問題。在了解Deferred之前，我們可能需要了解一個JavaScript中的promise模式。當我們使用回調來解決實際中的問題時，很容易不知不覺中出現代碼金字塔

step1(function() {
    step2(function() {
        step3(function() {
            step4(function() {
                step5();
            })
        })
    })
})

假如這個時候有一個js庫實現了promise模式，那么我們的代碼就會變得清晰可讀，并且每一步都會等待上一步執行完畢了才會執行。

new Promise().when(promiseStep1)
    .then(promiseStep2)
    .then(promiseStep3)
    .then(promiseStep4)
    .then(promiseStep5);

每一個promise對象都可以設置三種狀態：

pending  [進行中]
resolve  [已經正確執行]
reject   [執行失敗]

關于promise，還有更多需要了解的地方，我這里只是拋磚引玉。回到jQuery的Deferred對象來。jquery的Deferred對象就是對promise模式的一個很好的實現案例。我們通過一個簡單的例子來看看Deferred對象應該如何使用。

函數first是一個耗時兩秒的操作，而函數second是一個簡單的函數，但是他需要在first執行完畢之后才執行。

function first() {
    setTimeout(function() {
        console.log("first");
    }, 2000);
}
function second() {
    console.log("second");
}

為了達到second在first之后執行，使用Deferred對first函數做一個簡單的處理即可

function first() {
    // 1
    var defer = $.Deferred();
    setTimeout(function() {
        console.log("first");
        // 2
        defer.resolve();
    }, 2000);
    
    // 3
    return defer.promise();
}

1、在函數中聲明一個Deferred對象，這樣在外部就無法修改函數內部的執行狀態
2、函數執行完畢，設置執行狀態，如果成功執行，defer.resolve()，如果執行失敗，則設置為defer.reject()
3、在函數的最后，必須將deferred對象返回出去，否則外部無法得到函數的執行結果

在做了這樣的處理之后，我們就可以滿足要求的正常使用了

$.when(first())
 .done(second());

jquery中，ajax方法就是使用promise模式完成的，我們可以看看常規寫法和Deferred對象寫法的不同。

// 常規寫法
 $.ajax({
     url: "/api/test",
     type: "POST",
     data: {...},
     success: function(res) {
         // dosomething
     },
     fail: function(res) {
         // dosomething
     },
     complete: function() {
         // dosomething
     }
 })

// 新的寫法
$.ajax({
     url: "/api/test",
     type: "POST",
     ...
 })
 .done(function(res) {
     // success and do something
 })
 .fail(function(res) {
     // fail and do something
 })
 .always(function() {})

這個知識點差不多就總結完畢了。Promise模式與Deferred對象都還有更多值得了解知識點與用法，這是一個非常值得掌握的神兵利器，建議大家搜索更多的文章來學習它。

云服務器 GPU云服務器 jquery_deferred對象高級應用對象jquery nginx高級應用

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

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

jquery高級應用之Deferred對象

摘要：中的對象很好的解決了這個問題。每一個對象都可以設置三種狀態進行中已經正確執行執行失敗關于，還有更多需要了解的地方，我這里只是拋磚引玉。的對象就是對模式的一個很好的實現案例。我們通過一個簡單的例子來看看對象應該如何使用。在實際開發中常常遇到這樣的問題：B函數中需要用到的變量或者參數，只有等A函數執行完畢了才能獲取到。比如A函數中有一個ajax請求，而B函數中所需要的position變量...

monw3c 2019-08-19 18:26 評論0 收藏0
jquery高級應用之Deferred對象

摘要：中的對象很好的解決了這個問題。每一個對象都可以設置三種狀態進行中已經正確執行執行失敗關于，還有更多需要了解的地方，我這里只是拋磚引玉。的對象就是對模式的一個很好的實現案例。我們通過一個簡單的例子來看看對象應該如何使用。在實際開發中常常遇到這樣的問題：B函數中需要用到的變量或者參數，只有等A函數執行完畢了才能獲取到。比如A函數中有一個ajax請求，而B函數中所需要的position變量...

Profeel 2019-06-27 13:49 評論0 收藏0
JavaScript從初級往高級走系列————異步

摘要：之所以是單線程，取決于它的實際使用，例如不可能同添加一個和刪除這個，所以它只能是單線程的。所以，這個新標準并沒有改變單線程的本質。原文博客地址：https://finget.github.io/2018/05/21/async/ 異步什么是單線程，和異步有什么關系什么是event-loop 是否用過jQuery的Deferred Promise的基本使用和原理介紹一下asyn...

andot 2019-08-23 13:46 評論0 收藏0
Promise介紹--Deferred及jQuery篇

摘要：我們稱為回調對象，它內部會維護一個數組，我們可以向其中添加若干個回調函數，然后在某一條件下觸發執行。第一次之后，再次新的回調函數時，自動執行回調。當前面的回調函數返回時，終止后面的回調繼續執行。最近懶癌發作，說好的系列文章，寫了一半，一直懶得寫，今天補上一篇。 Deferred 我們在使用promise對象時，總會提到一個與它關系密切的對象——Deferred。其實Deferred沒...

Darkgel 2019-08-21 11:23 評論0 收藏0