Comment peut-jQuery différés être utilisé?

Ici est un peu différente de la mise en œuvre d'un AJAX cache dans ehynd réponse.

Comme indiqué dans fortuneRice est question de suivi, ehynd de la mise en œuvre n'a pas réellement d'éviter que plusieurs demandes identiques si les demandes ont été effectuées avant que l'un d'entre eux étaient retournés. C'est,

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

le plus de chances d'3 requêtes AJAX si le résultat pour "xxx" n'a pas déjà été mis en cache avant.

Cela peut être résolu par la mise en cache à la demande du Deferreds à la place du résultat:

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

C'est une auto-promotion de réponse, mais j'ai passé quelques mois à la recherche de cette et a présenté les résultats à jQuery de la Conférence de San Francisco 2012.

Voici une vidéo de la conférence:

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

Un autre exemple d'utilisation Deferreds pour mettre en œuvre un cache pour n'importe quel type de calcul (généralement des performances intenses ou de longue durée d'exécution des tâches):

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("|");
};

Voici un exemple d'utilisation de cette classe pour effectuer certains (simulé lourd) calcul:

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

Le même sous-jacent cache pourrait être utilisé pour mettre en cache les requêtes 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);
});

Vous pouvez jouer avec le code ci-dessus dans cette jsFiddle.

Vous pouvez utiliser un différé objet pour faire un design fluide qui fonctionne bien dans les navigateurs webkit. Les navigateurs Webkit le feu de l'événement de redimensionnement pour chaque pixel de la fenêtre est redimensionnée, contrairement à FF et IE qui déclenche l'événement qu'une seule fois pour chaque redimensionner. Comme un résultat, vous n'avez aucun contrôle sur l'ordre dans lequel les fonctions liées à la fenêtre de votre événement de redimensionnement à exécuter. Quelque chose comme cela résout le problème:

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

Cela va sérialiser l'exécution de votre code, de sorte qu'il s'exécute comme vous l'a voulu. Méfiez-vous des pièges lors du passage de méthodes de l'objet de tant de rappels pour une rente différée. Une fois que cette méthode est exécutée comme un rappel différé, le " il " de référence sera remplacée par la référence à l'objet reporté et ne fera plus référence à l'objet de la méthode appartient à.

J'ai simplement utilisé Reportés dans le code réel. Dans le projet jQuery Terminal j'ai de la fonction exec appel des commandes définies par l'utilisateur (comme s'il était à l'entrée et en appuyant sur entrée), j'ai ajouté Deferreds à l'API et à l'appel exec avec des tableaux. comme ceci:

terminal.exec('command').then(function() {
   terminal.echo('command finished');
});

ou

terminal.exec(['command 1', 'command 2', 'command 3']).then(function() {
   terminal.echo('all commands finished');
});

les commandes peuvent exécuter async code, et exec besoin d'appeler le code de l'utilisateur dans l'ordre. Ma première utilisation de l'api paire de mettre en pause/reprendre les appels et les nouvelles API, j'appelle ceux automatique lorsque l'utilisateur de revenir à la promesse. Si le code utilisateur peut simplement utiliser

return $.get('/some/url');

ou

var d = new $.Deferred();
setTimeout(function() {
    d.resolve("Hello Deferred"); //resolve value will be echoed
}, 500);
return d.promise();

- Je utiliser un code comme ceci:

exec: function(command, silent, deferred) {
    var d;
    if ($.isArray(command)) {
        return $.when.apply($, $.map(command, function(command) {
            return self.exec(command, silent);
        }));
    }
    //both commands executed here (resume will call Term::exec)
    if (paused) {
        //delay command multiple time
        d = deferred || new $.Deferred();
        dalyed_commands.push([command, silent, d]);
        return d.promise();
    } else {
        //commands may return promise from user code
        //it will resolve exec promise when user promise
        //is resolved
        var ret = commands(command, silent, true, deferred);
        if (!ret) {
            if (deferred) {
                deferred.resolve(self);
                return deferred.promise();
            } else {
                d = new $.Deferred();
                ret = d.promise();
                ret.resolve();
            }
        }
        return ret;
    }
},

dalyed_commands est utilisé dans la fonction de reprise que l'appel exec à nouveau avec toutes les dalyed_commands.

et une partie des commandes de fonction (je l'ai dépouillé de ne pas pièces connexes)

function commands(command, silent, exec, deferred) {

    var position = lines.length-1;
    //Call user interpreter function
    var result = interpreter.interpreter(command, self);
    //user code can return a promise
    if (result != undefined) {
        //new API - auto pause/resume when using promises
        self.pause();
        return $.when(result).then(function(result) {
            //don't echo result if user echo something
            if (result && position === lines.length-1) {
                display_object(result);
            }
            //resolve promise from exec. This will fire
            //code if used terminal::exec('command').then
            if (deferred) {
                deferred.resolve();
            }
            self.resume();
        });
    }
    //this is old API
    //if command call pause - wait until resume
    if (paused) {
        self.bind('resume.command', function() {
            //exec with resume/pause in user code
            if (deferred) {
                deferred.resolve();
            }
            self.unbind('resume.command');
        });
    } else {
        //this should not happen
        if (deferred) {
            deferred.resolve();
        }
    }
}