iT邦幫忙

4

jQuery Deferred Object 簡單介紹

簡單說明 jQuery Deferred Object
建立預設的 Deferred Object:

var dfd = $.Deferred();  // 要加上 new 也可以 new $.Deferred();

建立帶參數的 Deferred Object:

var dfd = $.Deferred(function(dfd) {
    console.log('Hello! Deferred');
});

Deferred Object 的狀態可分成三種

  1. Pending: Operation 處理中

  2. Resolve: Operation 處理成功

  3. Reject: Operation 處理失敗

    var dfd = $.Deferred();

    dfd.state(); // "pending"
    dfd.resolve();
    dfd.state(); // "resolved"
    dfd.reject(); // no effect, because the dfd was already resolved

Deferred Object 最大的特色在於處理非同步的狀況時,所執行的 Callback function 可以指定多個,讓程式增加可讀性,舉一個簡單的例子來說明:

$.ajax({
    url: 'test',
    success: function() {
        console.log('request success!');
    }
});

一般使用 jQuery 的 AJAX request 大致上如上,但在某些狀況下,我希望 Success 的 Callback function 可以指定多個,可以使用 Deferred Object 來達成。

var dfd = $.ajax('test');

dfd.done( function() {
    console.log(' function 1 ');
});

dfd.done( function() {
    console.log(' function 2 ');
});

另外 Deferred Object 的其他 Method,fail(), always() 也可以指定多個 Callback function


尚未有邦友留言

立即登入留言