JQuery的Deferred对象详解

发表于 | 分类于 | 次

JQuery的Deferred对象就是Jquery的回调函数的解决方案

在我们开发网站的过程中，我们经常会遇到很长的JavaScript操作。其中，既有异步的操作，如ajax读取服务器的数据，也有异步的操作，如遍历一个大型数组，他们都不是能立即返回结果的。通常的做法是，为他们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。简单地说，Deferred对象就是JQuery的回调函数的解决方案。在英语中，defer的意思是“延迟”，所以Deferred对象的含义是延迟到未来的某个点在执行。

ajax的链式写法

1
2
3
4
5
6
7
8
9
$.ajax({
        url: 'test.html',
        success: function(){
            alert('ok');
        },
        error: function(){
            alert('fail');
        }
    });

在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调方法，error方法指定操作失败后的回调函数。

$.ajax()操作完成后，如果使用的是低于1.5.0版本的JQuery，返回的是XHR对象，没法进行链式操作；如果高于1.5.0版本，返回的是Deferred对象，可以进行链式操作。

1
2
3
4
5
6
7
$.ajax('text.html')
.done(function(){
    alert('ok');    
})
.fail(function(){
    alert('fail');
});

指定同一操作的多个回调函数

Deferred对象的一大好处是允许你自由添加多个回调函数。
还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，还想再运行一个回调函数。代码如下：

1
2
3
4
5
6
7
8
9
10
$.ajax('test.html')
.done(function(){
    alert('ok');
})
.fail(function(){
    alert('fail')
})
.done(function(){
    alert('第二个回调');
});

回调函数可以添加任意多个，它们按添加顺序执行

为多个操作指定回调函数

Deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。此时用到一个新的方法：$.when():

1
2
3
4
5
6
7
$.when($.ajax('test1.html'),$.ajax('test2.html'))
.done(function(){
    alert('ok')  
})
.fail(function(){
    alert('fail');
});

这段代码的意思是，先执行两个操作$.ajax()操作，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

普通函数的回调函数接口（上）

Deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作（不管是ajax操作还是本地操作，也不管是异步操作还是同步操作，都可以使用Deferred对象的各种方法，指定回调函数）。

来看一个具体的例子。假如有一个很耗时的操作wait:

1
2
3
4
5
6
var wait = function(){
    var tasks = function(){
        alert('执行完毕');
    };
    setTimeout(tasks,5000);
};

为它指定回调函数，应该怎么做呢？

1
2
3
4
5
6
7
$.when(wait())
.done(function(){
    alert('haha');
})
.fail(function(){
    alert('fail');
});

但是，这样写的话，done()方法会立即执行，起不到回调函数的作用。原因在于$.when()的参数只能是Deferred对象，所以必须对wait()改写：

1
2
3
4
5
6
7
8
9
var dtd = $.Deferred(); //新建一个Deferred对象
var wait = function(dtd){
    var tasks = function(){
        alert('执行完毕');
        dtd.resolve();
    };
    setTimeout(tasks,5000);
    return dtd;
};

现在，wait()函数返回的是Deferred对象，这样就可以加上链式操作了。

1
2
3
4
5
6
7
$.when(wait(dtd))
.done(function(){
    alert('haha');
})
.fail(function(){
    alert('fail');
});

wait()函数运行完，就会自动运行done()方法指定的回调函数。

deferred.resolve()方法和deferred.reject()方法

JQuery规定，Deferred对象有三种执行状态:未完成，已完成和已失败。如果执行状态是“已完成”(resolved)，Deferred对象立即调用done()方法指定的回调函数；如果执行状态是“已失败”(rejected)，调用fail()方法指定的回调函数；如果执行状态是“未完成”(pending)，调用progress()方法指定的回调函数。

前面部分的ajax操作，Deferred对象会根据返回结果，自动改变自身的执行状态；但在wait()函数中，这个状态必须有程序员手动指定。dtd.resolve()的意思是，将Deferred对象的执行状态从“未完成”改为“已完成”，从而触发done()方法。类似的，还存在一个deferred.reject()方法，作用是将Deferred对象的执行状态从“未完成”改为“已失败”，从而触发fail()方法。

Deferred对象的promise()方法

上面这种写法，还是有问题。那就是dtd是一个全局对象，所以它的执行状态可以从外部改变。
看如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dtd = $.Deferred(); //新建一个Deferred对象
var wait = function(dtd){
    var tasks = function(){
        alert('执行完毕');
        dtd.resolve();
    };
    setTimeout(tasks,5000);
    return dtd;
};
$.when(wait(dtd))
.done(function(){
    alert('haha');
})
.fail(function(){
    alert('fail');
});
dtd.resolve();

在其尾部添加一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立即执行，先跳出“haha”,然后5秒后在跳出”执行完毕”的提示框。
为了避免这种情况，JQuery提供了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```JavaScript
    var dtd = $.Deferred(); // 新建一个Deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd.promise(); // 返回promise对象
　　};
　　var d = wait(dtd); // 新建一个d对象，改为对这个对象进行操作
　　$.when(d)
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });
　　d.resolve(); // 此时，这个语句是无效的

在上面的这段代码中，wait()函数返回的是promise对象。然后，我们把回调函数绑定到这个对象上，而不是原来的Deferred对象。这样的好处是，无法改变这个对象的执行状态，要想改变执行状态，只能操作原来的Deferred对象。

不过最好的写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
　　var wait = function(dtd){
var dtd = $.Deferred(); // 新建一个Deferred对象
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　　　return dtd.promise(); // 返回promise对象
　　};
　　var d = wait(dtd); // 新建一个d对象，改为对这个对象进行操作
　　$.when(d)
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

Deferred对象的方法

  • $.Deferred() 生成一个Deferred对象
  • deferred.progress() 该方法用于指定deferred对象状态为等待中的回调函数。但是她仅在deferred对象生成了进度通知时才会被调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    var wait = function() {
    var dtd = $.Deferred(); // 新建一个deferred对象    
    var i = 1,
        timer,
        percent; // 记录进度
    var tasks = function() {
        if (i == 11) {
            alert("执行完毕！");
            dtd.resolve(); // 此操作完成后改变deferred对象的执行状态
        } else {
            percent = (i * 500) / 5000 * 100 + '%';
            dtd.notify(percent); // 调用progress回调
            i++;
            setTimeout(tasks, 500);
        }
    };
    setTimeout(tasks, 1000);
    return dtd;
};
// 绑定回调函数
$.when(wait())
    .done(function() {
        alert("执行成功了！");
    })
    .fail(function() {
        alert("出错啦！");
    })
    .progress(function(data) {
        console.log('执行中,已完成', data);
    });
// 执行中,已完成 10%
// 执行中,已完成 20%
// 执行中,已完成 30%
// 执行中,已完成 40%
// 执行中,已完成 50%
// 执行中,已完成 60%
// 执行中,已完成 70%
// 执行中,已完成 80%
// 执行中,已完成 90%
// 执行中,已完成 100%
// 之后弹出 执行完毕！和 执行成功了！

jQuery3.0以上版本对when方法做了大幅调整。向promise/A+靠齐，上面的写法中notify是触发不了when中的progress回调的，需要使用promise来给对象部署deferred接口或使用$.Deferred()传入函数名。

  1. promise 给一个对象部署Deferred接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd) {
    var i = 1,
        timer,
        percent; // 记录进度
    var tasks = function() {
        if (i == 11) {
            alert("执行完毕！");
            dtd.resolve(); // 此操作完成后改变deferred对象的执行状态
        } else {
            percent = (i * 500) / 5000 * 100 + '%';
            dtd.notify(percent); // 调用progress回调
            i++;
            setTimeout(tasks, 500);
        }
    };
    setTimeout(tasks, 1000);        
};
// 在wait对象上部署Deferred接口，此后就可以直接在wait上使用deferred对象promise后的方法了
dtd.promise(wait);
// 在wait对象上使用deferred对象的方法指定回调。
wait.done(function() {
    alert("执行成功了！");
})
.fail(function() {
    alert("出错啦！");
})
.progress(function(data) {
    console.log('执行中,已完成', data);
});
// 执行
wait(dtd);
  1. 使用$.Deferred传入函数名：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var wait = function(dtd) {
    var i = 1,
        timer,
        percent; // 记录进度
    var tasks = function() {
        if (i == 11) {
            alert("执行完毕！");
            dtd.resolve(); // 此操作完成后改变deferred对象的执行状态
        } else {
            percent = (i * 500) / 5000 * 100 + '%';
            dtd.notify(percent); // 调用progress回调
            i++;
            setTimeout(tasks, 500);
        }
    };
    setTimeout(tasks, 1000);
    return dtd;
};
// 绑定回调函数
$.Deferred(wait)  //$.Deferred()的返回值将作为wait函数的参数
    .done(function() {
        alert("执行成功了！");
    })
    .fail(function() {
        alert("出错啦！");
    })
    .progress(function(data) {
        console.log('执行中,已完成', data);
    });
  • deferred.done() 指定操作成功时的回调函数
  • deferred.fail() 指定操作失败时的回调函数
  • deferred.promise() 没有参数时，返回一个新的Deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。
  • deferred.resolve() 手动改变deferred对象的运行状态为“已完成”，从而触发done()方法。
  • deferred.always() 不管Deferred对象如何，总是执行。
  • deferred.reject() 这个方法与deferred.resolve()正好相反，调用后将Deferred对象的运行状态变为“已失败”，从而立即触发fail()方法。
  • $.when() 为多个操作指定回调函数。
  • deferred.then() 有时为了省事，可以把done()和fail()合写在一起，这就是then()方法。
1
2
$.when($.ajax('test.html'))
    .then(successFunc,failureFunc);

如果then()有两个参数，那么第一个参数时done()方法的回调函数。如果then()只有一个参数，那么等同于done()。