Как можно использовать jQuery deferred? - PullRequest
277 голосов
/ 02 февраля 2011

jQuery 1.5 приносит новый отложенный объект и присоединенные методы .when, .Deferred и ._Deferred.

Для тех, кто не использовал .Deferred раньше, я аннотировал источник для него .

Каковы возможные применения этих новых методов, как мы можем приспособить их к шаблонам?

Я уже прочитал API и source , поэтому я знаю, что он делает. Мой вопрос: как мы можем использовать эти новые функции в повседневном коде?

У меня есть простой пример класса буфера, который вызывает 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 для примеров - мошенничество.

Меня особенно интересует, какие методы доступны, когда мы абстрагируемся, выполняется ли операция синхронно или асинхронно.

Ответы [ 11 ]

210 голосов
/ 02 февраля 2011

Лучший вариант использования, который я могу придумать, это кэширование ответов AJAX. Вот модифицированный пример из вступительного сообщения Ребекки Мёрфи на тему :

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() в цепочке.

Отложенные идеально подходят для случаев, когда задача может работать или не работать асинхронно, и вы хотите абстрагировать это условие от кода.

Другой пример из реальной жизни с использованием помощника $.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

});
79 голосов
/ 22 января 2012

Вот немного отличающаяся реализация AJAX-кэша, как в ответе ehynd .

Как отмечено в последующем вопросе fortuneRice , реализация ehynd на самом деле не предотвращала множественные идентичные запросы, если запросы были выполнены до того, как один из них вернулся. То есть

for (var i=0; i<3; i++) {
    getData("xxx");
}

, скорее всего, приведет к 3 AJAX-запросам, если результат для "xxx" еще не был кэширован ранее.

Эту проблему можно решить, кэшировав отложенные запросы вместо результата:

var cache = {};

function getData( val ){

    // Return a promise from the cache (if available)
    // or create a new one (a jqXHR object) and store it in the cache.
    var promise = cache[val];
    if (!promise) {
        promise = $.ajax('/foo/', {
            data: { value: val },
            dataType: 'json'
        });
        cache[val] = promise;
    }
    return promise;
}

$.when(getData('foo')).then(function(resp){
    // do something with the response, which may
    // or may not have been retreived using an
    // XHR request.
});
43 голосов
/ 23 мая 2011

Отложенный может использоваться вместо мьютекса. По сути, это то же самое, что и сценарии множественного использования AJAX.

MUTEX

var mutex = 2;

setTimeout(function() {
 callback();
}, 800);

setTimeout(function() {
 callback();
}, 500);

function callback() {
 if (--mutex === 0) {
  //run code
 }
}

DEFERRED

function timeout(x) {
 var dfd = jQuery.Deferred();
 setTimeout(function() {
  dfd.resolve();
 }, x);
 return dfd.promise();
}

jQuery.when(
timeout(800), timeout(500)).done(function() {
 // run code
});

При использовании Deferred только в качестве мьютекса, следите за влиянием производительности (http://jsperf.com/deferred-vs-mutex/2). Хотя удобство, а также дополнительные преимущества, предоставляемые Deferred, того стоят, и при фактическом (управляемом пользователем событии на основе событий) использование влияние на производительность не должно быть заметным.

28 голосов
/ 11 октября 2012

Это саморекламируемый ответ, но я потратил несколько месяцев на его изучение и представил результаты на jQuery Conference San Francisco 2012.

Вот бесплатное видео разговора:

http://www.confreaks.com/videos/993-jqcon2012-i-promise-to-show-you-when-to-use-deferreds

20 голосов
/ 04 февраля 2011

Еще одно применение, которое я использовал для хороших целей, - это выборка данных из нескольких источников. В приведенном ниже примере я извлекаю несколько независимых объектов схемы JSON, используемых в существующем приложении для проверки между клиентом и сервером REST. В этом случае я не хочу, чтобы приложение на стороне браузера начинало загружать данные до того, как загрузятся все схемы. $ .when.apply (). then () идеально подходит для этого. Спасибо Raynos за указатели на использование then (fn1, fn2) для отслеживания ошибок.

fetch_sources = function (schema_urls) {
    var fetch_one = function (url) {
            return $.ajax({
                url: url,
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            });
        }
    return $.map(schema_urls, fetch_one);
}

var promises = fetch_sources(data['schemas']);
$.when.apply(null, promises).then(

function () {
    var schemas = $.map(arguments, function (a) {
        return a[0]
    });
    start_application(schemas);
}, function () {
    console.log("FAIL", this, arguments);
});     
10 голосов
/ 22 января 2012

Другой пример использования Deferred s для реализации кэша для любого вида вычислений (обычно это некоторые задачи с высокой производительностью или длительные задачи):

var ResultsCache = function(computationFunction, cacheKeyGenerator) {
    this._cache = {};
    this._computationFunction = computationFunction;
    if (cacheKeyGenerator)
        this._cacheKeyGenerator = cacheKeyGenerator;
};

ResultsCache.prototype.compute = function() {
    // try to retrieve computation from cache
    var cacheKey = this._cacheKeyGenerator.apply(this, arguments);
    var promise = this._cache[cacheKey];

    // if not yet cached: start computation and store promise in cache 
    if (!promise) {
        var deferred = $.Deferred();
        promise = deferred.promise();
        this._cache[cacheKey] = promise;

        // perform the computation
        var args = Array.prototype.slice.call(arguments);
        args.push(deferred.resolve);
        this._computationFunction.apply(null, args);
    }

    return promise;
};

// Default cache key generator (works with Booleans, Strings, Numbers and Dates)
// You will need to create your own key generator if you work with Arrays etc.
ResultsCache.prototype._cacheKeyGenerator = function(args) {
    return Array.prototype.slice.call(arguments).join("|");
};

Вот пример использования этого класса длявыполнить некоторые (смоделированные) вычисления:

// The addingMachine will add two numbers
var addingMachine = new ResultsCache(function(a, b, resultHandler) {
    console.log("Performing computation: adding " + a + " and " + b);
    // simulate rather long calculation time by using a 1s timeout
    setTimeout(function() {
        var result = a + b;
        resultHandler(result);
    }, 1000);
});

addingMachine.compute(2, 4).then(function(result) {
    console.log("result: " + result);
});

addingMachine.compute(1, 1).then(function(result) {
    console.log("result: " + result);
});

// cached result will be used
addingMachine.compute(2, 4).then(function(result) {
    console.log("result: " + result);
});

Для кеширования запросов Ajax можно использовать тот же базовый кеш:

var ajaxCache = new ResultsCache(function(id, resultHandler) {
    console.log("Performing Ajax request for id '" + id + "'");
    $.getJSON('http://jsfiddle.net/echo/jsonp/?callback=?', {value: id}, function(data) {
        resultHandler(data.value);
    });
});

ajaxCache.compute("anID").then(function(result) {
    console.log("result: " + result);
});

ajaxCache.compute("anotherID").then(function(result) {
    console.log("result: " + result);
});

// cached result will be used
ajaxCache.compute("anID").then(function(result) {
    console.log("result: " + result);
});

Вы можете поиграть с приведенным выше кодом в jsFiddle .

9 голосов
/ 14 сентября 2012

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
});
2 голосов
/ 15 мая 2011

Вы также можете интегрировать его с любыми сторонними библиотеками, использующими JQuery.

Одной из таких библиотек является Backbone, которая фактически будет поддерживать Deferred в следующей версии.Я говорил об этом также в моем блоге

2 голосов
/ 01 марта 2011

Вы можете использовать отложенный объект для создания плавного дизайна, который хорошо работает в браузерах 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, ссылка «this» будет перезаписана со ссылкой на объект deferred и больше не будет ссылаться на объект, которому принадлежит метод.

1 голос
/ 28 января 2015

Ответ по ehynds не будет работать, поскольку он кэширует данные ответов. Он должен кэшировать jqXHR, который также является Обещанием. Вот правильный код:

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.
});

Ответ Джулиана Д. будет работать правильно и является лучшим решением.

...