jQuery中的Deferred对象

有点类似于es6中的Promise，是jQuery回调函数的一种解决方案。

var d = $.Deferred();

$.when(d).done(function (value) {
    console.log(value)
})

setTimeout(function () {
    d.resolve('hello world');
}, 2000);

理论上，上述函数应该立即执行结束，不会打印任何文字，但是，使用Deferred这个延迟对象，在延迟2秒后，调用resolve方法，表示其要执行done方法代表成功，所以上述代码2秒后将会打印出hello world。当然，使用reject时，则代表失败，将会调用fail方法。

所以，该对象的最常见的使用场景应该是异步请求后执行操作。

$.when($.ajax('/testurl')).done(function (value) {
    console.log('成功获取数据');
}).fail(function () {
    console.log('出错了');
})

使用Deferred有一个好处，就是允许你为多个事件指定一个回调。

$.when($.ajax('/testurl'), $.ajax('/testurl2')).done(function (value) {
    console.log('成功获取数据')
}).fail(function() {
    console.log('出错了')
})

Deferred还有一大优点，我们可以用其改写本地函数，只需要在函数必要回调的位置手动resolve，在函数未成功执行时手动reject即可。

var deferredFunc = function () {
    var d = $.Deferred();
    var promiseFunc = function () {
        console.log('执行结束')
        d.resolve();
    }
    setTimeout(promiseFunc, 2000);
    return d;
}

上面这段代码将会在延迟两秒后打印执行结束。

在上面的这些代码中，只要调用了resolve或者reject，就意味着代码执行结束了，如果想达到实时推送效果该如何实现呢？在Deferred中，还有一个方法notify，可以达到此目的。

function response() {
    var promise = $.Deferred();
    var data = [12, 2, 3];
    promise.notify(data);

    setTimeout(function () {
        promise.notify([1, 2, 4, 5, 6]);
    }, 5000);

    return promise;
}


response().progress(function (data) {
    console.log(data);
})

上述代码首先打印[12, 2, 3]，间隔5秒后又打印出[1, 2, 4, 5, 6]，推送的效果就轻松实现了。