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

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ù)計算出了position的值才會執(zhí)行，它會不等待A函數(shù)的結(jié)果而直接開始執(zhí)行，這樣就會造成position無法正確賦值。為了解決這個問題，我們很容易想到使用回調(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ù)當做回調(diào)函數(shù)傳遞給A

A(B);

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

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

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

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

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

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

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

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

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

function first() {
  setTimeout(function() {
    console.log('first');
  }, 2000);
}
function second() {
  console.log('second');
}
為了達到second在first之后執(zhí)行，使用Deferred對first函數(shù)做一個簡單的處理即可
function first() {
  // 1
  var defer = $.Deferred();
  setTimeout(function() {
    console.log('first');
    // 2
    defer.resolve();
  }, 2000);
  
  // 3
  return defer.promise();
}

1、在函數(shù)中聲明一個Deferred對象，這樣在外部就無法修改函數(shù)內(nèi)部的執(zhí)行狀態(tài)

2、函數(shù)執(zhí)行完畢，設置執(zhí)行狀態(tài)，如果成功執(zhí)行，defer.resolve()，如果執(zhí)行失敗，則設置為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() {})

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論