摘要:中的對象很好的解決了這個(gè)問題。每一個(gè)對象都可以設(shè)置三種狀態(tài)進(jìn)行中已經(jīng)正確執(zhí)行執(zhí)行失敗關(guān)于,還有更多需要了解的地方,我這里只是拋磚引玉。的對象就是對模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡單的例子來看看對象應(yīng)該如何使用。
在實(shí)際開發(fā)中常常遇到這樣的問題:B函數(shù)中需要用到的變量或者參數(shù),只有等A函數(shù)執(zhí)行完畢了才能獲取到。比如A函數(shù)中有一個(gè)ajax請求,而B函數(shù)中所需要的position變量需要在A函數(shù)中ajax請求完成才能得到它的準(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ù)不會等待A函數(shù)計(jì)算出了position的值才會執(zhí)行,它會不等待A函數(shù)的結(jié)果而直接開始執(zhí)行,這樣就會造成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,成功了會有一個(gè)回調(diào)函數(shù),失敗了還有一個(gè)回調(diào)函數(shù),面對這樣復(fù)雜的情況,我們應(yīng)該怎么樣處理?雖然使用回調(diào)函數(shù)依然能夠搞定這些煩人的難題,但是很顯然這并不是一個(gè)好的解決辦法。
jquery中的Deferred對象很好的解決了這個(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庫實(shí)現(xiàn)了promise模式,那么我們的代碼就會變得清晰可讀,并且每一步都會等待上一步執(zhí)行完畢了才會執(zhí)行。
new Promise().when(promiseStep1) .then(promiseStep2) .then(promiseStep3) .then(promiseStep4) .then(promiseStep5);
每一個(gè)promise對象都可以設(shè)置三種狀態(tài):
pending [進(jìn)行中] resolve [已經(jīng)正確執(zhí)行] reject [執(zhí)行失敗]
關(guān)于promise,還有更多需要了解的地方,我這里只是拋磚引玉。回到j(luò)Query的Deferred對象來。jquery的Deferred對象就是對promise模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡單的例子來看看Deferred對象應(yīng)該如何使用。
函數(shù)first是一個(gè)耗時(shí)兩秒的操作,而函數(shù)second是一個(gè)簡單的函數(shù),但是他需要在first執(zhí)行完畢之后才執(zhí)行。
function first() { setTimeout(function() { console.log("first"); }, 2000); } function second() { console.log("second"); }
為了達(dá)到second在first之后執(zhí)行,使用Deferred對first函數(shù)做一個(gè)簡單的處理即可
function first() { // 1 var defer = $.Deferred(); setTimeout(function() { console.log("first"); // 2 defer.resolve(); }, 2000); // 3 return defer.promise(); }
1、在函數(shù)中聲明一個(gè)Deferred對象,這樣在外部就無法修改函數(shù)內(nèi)部的執(zhí)行狀態(tài)
2、函數(shù)執(zhí)行完畢,設(shè)置執(zhí)行狀態(tài),如果成功執(zhí)行,defer.resolve(),如果執(zhí)行失敗,則設(shè)置為defer.reject()
3、在函數(shù)的最后,必須將deferred對象返回出去,否則外部無法得到函數(shù)的執(zhí)行結(jié)果
在做了這樣的處理之后,我們就可以滿足要求的正常使用了
$.when(first()) .done(second());
jquery中,ajax方法就是使用promise模式完成的,我們可以看看常規(guī)寫法和Deferred對象寫法的不同。
// 常規(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è)知識點(diǎn)差不多就總結(jié)完畢了。Promise模式與Deferred對象都還有更多值得了解知識點(diǎn)與用法,這是一個(gè)非常值得掌握的神兵利器,建議大家搜索更多的文章來學(xué)習(xí)它。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/21635.html
摘要:中的對象很好的解決了這個(gè)問題。每一個(gè)對象都可以設(shè)置三種狀態(tài)進(jìn)行中已經(jīng)正確執(zhí)行執(zhí)行失敗關(guān)于,還有更多需要了解的地方,我這里只是拋磚引玉。的對象就是對模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡單的例子來看看對象應(yīng)該如何使用。 在實(shí)際開發(fā)中常常遇到這樣的問題:B函數(shù)中需要用到的變量或者參數(shù),只有等A函數(shù)執(zhí)行完畢了才能獲取到。比如A函數(shù)中有一個(gè)ajax請求,而B函數(shù)中所需要的position變量...
摘要:中的對象很好的解決了這個(gè)問題。每一個(gè)對象都可以設(shè)置三種狀態(tài)進(jìn)行中已經(jīng)正確執(zhí)行執(zhí)行失敗關(guān)于,還有更多需要了解的地方,我這里只是拋磚引玉。的對象就是對模式的一個(gè)很好的實(shí)現(xiàn)案例。我們通過一個(gè)簡單的例子來看看對象應(yīng)該如何使用。 在實(shí)際開發(fā)中常常遇到這樣的問題:B函數(shù)中需要用到的變量或者參數(shù),只有等A函數(shù)執(zhí)行完畢了才能獲取到。比如A函數(shù)中有一個(gè)ajax請求,而B函數(shù)中所需要的position變量...
摘要:之所以是單線程,取決于它的實(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...
摘要:我們稱為回調(diào)對象,它內(nèi)部會維護(hù)一個(gè)數(shù)組,我們可以向其中添加若干個(gè)回調(diào)函數(shù),然后在某一條件下觸發(fā)執(zhí)行。第一次之后,再次新的回調(diào)函數(shù)時(shí),自動執(zhí)行回調(diào)。當(dāng)前面的回調(diào)函數(shù)返回時(shí),終止后面的回調(diào)繼續(xù)執(zhí)行。 最近懶癌發(fā)作,說好的系列文章,寫了一半,一直懶得寫,今天補(bǔ)上一篇。 Deferred 我們在使用promise對象時(shí),總會提到一個(gè)與它關(guān)系密切的對象——Deferred。其實(shí)Deferred沒...
閱讀 3110·2021-11-24 09:39
閱讀 968·2021-09-07 10:20
閱讀 2389·2021-08-23 09:45
閱讀 2254·2021-08-05 10:00
閱讀 566·2019-08-29 16:36
閱讀 833·2019-08-29 11:12
閱讀 2813·2019-08-26 11:34
閱讀 1839·2019-08-26 10:56