如何使用jQuery延迟? [英] How can jQuery deferred be used?

查看:113
本文介绍了如何使用jQuery延迟?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

jQuery 1.5 brings the new Deferred object and the attached methods .when, .Deferred and ._Deferred.

对于那些没有使用 .Deferred 的人在我注释的来源之前

For those who havn't used .Deferred before I've annotated the source for it

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

What are the possible usages of these new methods, how do we go about fitting them into patterns?

我已经读过 API source ,所以我知道它的作用。我的问题是我们如何在日常代码中使用这些新功能?

I have already read the API and the source, so I know what it does. My question is how can we use these new features in everyday code?

我有一个简单的示例缓冲类按顺序调用AJAX请求。 (下一个在前一个完成后开始)。

I have a simple example of a buffer class that calls AJAX request in order. (Next one start after previous one finishes).

/* 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

I'm looking for demonstrations and possible uses of .Deferred and .when.

看到 ._递延。

链接到新的 jQuery.ajax 示例的来源是作弊。

Linking to the new jQuery.ajax source for examples is cheating.

Bounty:向我们展示当我们抽象出操作是同步还是异步完成时可用的技术。

Bounty: Show us what techniques are available when we abstract away whether an operation is synchronously or asynchronously done.

推荐答案

最佳用例我能想到的是缓存AJAX响应。以下是来自 Rebecca Murphey关于该主题的介绍帖子的修改示例

The best use case I can think of is in caching AJAX responses. Here's a modified example from Rebecca Murphey's intro post on the topic:

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请求将获取数据并将其添加到缓存中。 $。当 / .then 并不关心这些;所有你需要关心的是使用响应,在两种情况下都会传递给 .then()处理程序。 jQuery.when() 处理非承诺/延期作为已完成的,立即执行任何 .done() .then()链接。

Basically, if the value has already been requested once before it's returned immediately from the cache. Otherwise, an AJAX request fetches the data and adds it to the cache. The $.when/.then doesn't care about any of this; all you need to be concerned about is using the response, which is passed to the .then() handler in both cases. jQuery.when() handles a non-Promise/Deferred as a Completed one, immediately executing any .done() or .then() on the chain.

当任务可能会或可能不会异步运行时,延迟是完美的,并且您希望从代码中抽象出这种情况。

Deferreds are perfect for when the task may or may not operate asynchronously, and you want to abstract that condition out of the code.

使用 $。的另一个真实世界示例。 helper:

$.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

});

这篇关于如何使用jQuery延迟?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆