jQuery 1.5带来了新的Deferred对象和附加方法.when、.Deferred和. _deferred。

对于那些以前没有使用过. deferred的人,我已经为它注释了源代码。

这些新方法的可能用途是什么,我们如何将它们纳入模式?

我已经阅读了API和源代码,所以我知道它是做什么的。我的问题是我们如何在日常代码中使用这些新特性?

我有一个简单的缓冲区类示例,它按顺序调用AJAX请求。(上一个结束后下一个开始)。

/* Class: Buffer
 *  methods: append
 *
 *  Constructor: takes a function which will be the task handler to be called
 *
 *  .append appends a task to the buffer. Buffer will only call a task when the 
 *  previous task has finished
 */
var Buffer = function(handler) {
    var tasks = [];
    // empty resolved deferred object
    var deferred = $.when();

    // handle the next object
    function handleNextTask() {
        // if the current deferred task has resolved and there are more tasks
        if (deferred.isResolved() && tasks.length > 0) {
            // grab a task
            var task = tasks.shift();
            // set the deferred to be deferred returned from the handler
            deferred = handler(task);
            // if its not a deferred object then set it to be an empty deferred object
            if (!(deferred && deferred.promise)) {
                deferred = $.when();
            }
            // if we have tasks left then handle the next one when the current one 
            // is done.
            if (tasks.length > 0) {
                deferred.done(handleNextTask);
            }
        }
    }

    // appends a task.
    this.append = function(task) {
        // add to the array
        tasks.push(task);
        // handle the next task
        handleNextTask();
    };
};

我正在寻找. deferred和.when的演示和可能的用法。

看到. _deferred的例子也很不错。

链接到新的jQuery。Ajax源代码的例子是作弊。

我特别感兴趣的是,当我们抽象出一个操作是同步完成还是异步完成时,可以使用哪些技术。


当前回答

您还可以将它与任何使用JQuery的第三方库集成。

Backbone就是这样一个库,它将在下一个版本中支持Deferred。

其他回答

ehyds的答案将不起作用,因为它缓存了响应数据。它应该缓存jqXHR,这也是一个Promise。 下面是正确的代码:

var cache = {};

function getData( val ){

    // return either the cached value or an
    // jqXHR object (which contains a promise)
    return cache[ val ] || $.ajax('/foo/', {
        data: { value: val },
        dataType: 'json',
        success: function(data, textStatus, jqXHR){
            cache[ val ] = jqXHR;
        }
    });
}

getData('foo').then(function(resp){
    // do something with the response, which may
    // or may not have been retreived using an
    // XHR request.
});

Julian d的答案是正确的,是一个更好的解决方案。

您还可以将它与任何使用JQuery的第三方库集成。

Backbone就是这样一个库,它将在下一个版本中支持Deferred。

您可以使用延迟对象来实现在webkit浏览器中工作良好的流动设计。Webkit浏览器将为窗口调整大小的每个像素触发调整大小事件,不像FF和IE只对每次调整大小触发一次事件。因此,您无法控制绑定到窗口调整大小事件的函数的执行顺序。这样就解决了问题:

var resizeQueue = new $.Deferred(); //new is optional but it sure is descriptive
resizeQueue.resolve();

function resizeAlgorithm() {
//some resize code here
}

$(window).resize(function() {
    resizeQueue.done(resizeAlgorithm);
});

这将序列化代码的执行,以便它按照您的意图执行。在将对象方法作为回调传递给deferred对象时,要当心陷阱。一旦这样的方法作为deferred的回调执行,'this'引用将被覆盖为对deferred对象的引用,并且不再引用该方法所属的对象。

这是一个自我宣传的答案,但我花了几个月的时间研究这个问题,并在2012年旧金山jQuery大会上展示了结果。

这是一个免费视频的谈话:

https://www.youtube.com/watch?v=juRtEEsHI9E

1)使用它来确保回调的有序执行:

var step1 = new Deferred();
var step2 = new Deferred().done(function() { return step1 });
var step3 = new Deferred().done(function() { return step2 });

step1.done(function() { alert("Step 1") });
step2.done(function() { alert("Step 2") });
step3.done(function() { alert("All done") });
//now the 3 alerts will also be fired in order of 1,2,3
//no matter which Deferred gets resolved first.

step2.resolve();
step3.resolve();
step1.resolve();

2)用它来验证应用的状态:

var loggedIn = logUserInNow(); //deferred
var databaseReady = openDatabaseNow(); //deferred

jQuery.when(loggedIn, databaseReady).then(function() {
  //do something
});