jQuery中的Deferred对象

该文章由 leevare 发布于 ,归类于 Javascript

有点类似于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],推送的效果就轻松实现了。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒