一尘不染

如何使用jQuery延迟?

javascript

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资源的例子是作弊。

当我们抽象出一个操作是同步还是异步完成时,我对什么技术可用特别感兴趣。


阅读 328

收藏
2020-05-01

共1个答案

一尘不染

我能想到的最佳用例是缓存AJAX响应。这是RebeccaMurphey关于该主题的介绍性帖子

var cache = {};

function getData( val ){

    // return either the cached value or jqXHR object wrapped Promise
    return $.when(
        cache[ val ] || 
        $.ajax('/foo/', {
            data: { value: val },
            dataType: 'json',
            success: function( resp ){
                cache[ val ] = resp;
            }
        })
    );
}

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

基本上,如果该值在从缓存立即返回之前已经被请求一次。否则,AJAX请求将获取数据并将其添加到缓存中。的$.when/ .then不关心任何的这一点;
您需要关心的就是使用响应,.then()在两种情况下都将响应传递给处理程序。jQuery.when()手柄的非无极/延迟作为一个已完成,立即执行任何.done().then()上链。

对于任务可能会异步执行或可能不会异步执行以及您希望从代码中抽象出该条件的情况,Deferreds非常适合。

使用$.when助手的另一个真实示例:

$.when($.getJSON('/some/data/'), $.get('template.tpl')).then(function (data, tmpl) {

    $(tmpl) // create a jQuery object out of the template
    .tmpl(data) // compile it
    .appendTo("#target"); // insert it into the DOM

});
2020-05-01