国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

jquery高級(jí)應(yīng)用之Deferred對(duì)象

monw3c / 755人閱讀

摘要：中的對(duì)象很好的解決了這個(gè)問題。每一個(gè)對(duì)象都可以設(shè)置三種狀態(tài)進(jìn)行中已經(jīng)正確執(zhí)行執(zhí)行失敗關(guān)于，還有更多需要了解的地方，我這里只是拋磚引玉。的對(duì)象就是對(duì)模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡(jiǎn)單的例子來看看對(duì)象應(yīng)該如何使用。

在實(shí)際開發(fā)中常常遇到這樣的問題：B函數(shù)中需要用到的變量或者參數(shù)，只有等A函數(shù)執(zhí)行完畢了才能獲取到。比如A函數(shù)中有一個(gè)ajax請(qǐng)求，而B函數(shù)中所需要的position變量需要在A函數(shù)中ajax請(qǐng)求完成才能得到它的準(zhǔn)確值。

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

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

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

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

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

A函數(shù)有了回調(diào)之后，就可以將B函數(shù)當(dāng)做回調(diào)函數(shù)傳遞給A

A(B);

可是如果這個(gè)時(shí)候，還有一個(gè)C函數(shù)，依賴于B的執(zhí)行結(jié)果呢，后面甚至有可能出現(xiàn)一個(gè)D函數(shù)，依賴于C的結(jié)果！又如我們常用的ajax，成功了會(huì)有一個(gè)回調(diào)函數(shù)，失敗了還有一個(gè)回調(diào)函數(shù)，面對(duì)這樣復(fù)雜的情況，我們應(yīng)該怎么樣處理？雖然使用回調(diào)函數(shù)依然能夠搞定這些煩人的難題，但是很顯然這并不是一個(gè)好的解決辦法。

jquery中的Deferred對(duì)象很好的解決了這個(gè)問題。在了解Deferred之前，我們可能需要了解一個(gè)JavaScript中的promise模式。當(dāng)我們使用回調(diào)來解決實(shí)際中的問題時(shí)，很容易不知不覺中出現(xiàn)代碼金字塔

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

假如這個(gè)時(shí)候有一個(gè)js庫(kù)實(shí)現(xiàn)了promise模式，那么我們的代碼就會(huì)變得清晰可讀，并且每一步都會(huì)等待上一步執(zhí)行完畢了才會(huì)執(zhí)行。

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

每一個(gè)promise對(duì)象都可以設(shè)置三種狀態(tài)：

pending  [進(jìn)行中]
resolve  [已經(jīng)正確執(zhí)行]
reject   [執(zhí)行失敗]

關(guān)于promise，還有更多需要了解的地方，我這里只是拋磚引玉。回到j(luò)Query的Deferred對(duì)象來。jquery的Deferred對(duì)象就是對(duì)promise模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡(jiǎn)單的例子來看看Deferred對(duì)象應(yīng)該如何使用。

函數(shù)first是一個(gè)耗時(shí)兩秒的操作，而函數(shù)second是一個(gè)簡(jiǎn)單的函數(shù)，但是他需要在first執(zhí)行完畢之后才執(zhí)行。

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

為了達(dá)到second在first之后執(zhí)行，使用Deferred對(duì)first函數(shù)做一個(gè)簡(jiǎn)單的處理即可

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

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

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

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

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

// 常規(guī)寫法
 $.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() {})

這個(gè)知識(shí)點(diǎn)差不多就總結(jié)完畢了。Promise模式與Deferred對(duì)象都還有更多值得了解知識(shí)點(diǎn)與用法，這是一個(gè)非常值得掌握的神兵利器，建議大家搜索更多的文章來學(xué)習(xí)它。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79600.html

相關(guān)文章

  • jquery高級(jí)應(yīng)用之Deferred對(duì)象

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

    tianren124 評(píng)論0 收藏0

  • jquery高級(jí)應(yīng)用之Deferred對(duì)象

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

    Profeel 評(píng)論0 收藏0

  • JavaScript從初級(jí)往高級(jí)走系列————異步

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

    andot 評(píng)論0 收藏0

  • Promise介紹--Deferred及jQuery篇

    摘要：我們稱為回調(diào)對(duì)象，它內(nèi)部會(huì)維護(hù)一個(gè)數(shù)組，我們可以向其中添加若干個(gè)回調(diào)函數(shù)，然后在某一條件下觸發(fā)執(zhí)行。第一次之后，再次新的回調(diào)函數(shù)時(shí)，自動(dòng)執(zhí)行回調(diào)。當(dāng)前面的回調(diào)函數(shù)返回時(shí)，終止后面的回調(diào)繼續(xù)執(zhí)行。 最近懶癌發(fā)作，說好的系列文章，寫了一半，一直懶得寫，今天補(bǔ)上一篇。 Deferred 我們?cè)谑褂胮romise對(duì)象時(shí)，總會(huì)提到一個(gè)與它關(guān)系密切的對(duì)象——Deferred。其實(shí)Deferred沒...

    Darkgel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<