Problèmes utilisant Deferred/When dans jquery pour différer une fonction

Question

J'ai vraiment du mal à utiliser Deferred ou When avec mon script jquery.J'ai parcouru un certain nombre d'articles ici et ailleurs (y compris api.jquery.com) et je pense que je suis juste un peu trop débutant pour comprendre exactement comment utiliser ces appels.

J'essaie de différer l'exécution d'une fonction jusqu'à ce qu'une fonction précédente de mon script soit terminée.

J'ai

function datapoints () {
    //My long function here where I define $data
};

dont le résultat est un tableau nommé $data.J'ai besoin que cette variable $data soit définie pour ma prochaine fonction, je souhaite donc la reporter.

J'ai essayé de configurer le report comme ceci :

var deferred = $.Deferred();

deferred.resolve(datapoints());

deferred.done(function result (){
    // My function here where I use $data
        }
    );

J'apprécierais vraiment quelques conseils sur la façon de nettoyer cela.J'ai essayé de recréer divers exemples mais le résultat à chaque fois est une erreur de console indiquant que $data n'est pas défini.Je sais que le code fonctionne car lorsque je mets manuellement un setTimeout de quelques secondes avant d'exécuter la deuxième fonction, tout fonctionne bien mais je pense que le différé est une meilleure solution.

Merci d'avance!

Answer 1

Essayez de corriger votre code comme ceci :

deferred.done(function result (data){
    // Do not use global $data, use local 'data' instead
    }
);

Cela garantira que les données que vous utilisez sont bien les données renvoyées par datapoints().

Vous devez également savoir qu'à moins que datapoints() est une fonction asynchrone, le code que vous avez écrit bloquera le thread JS (c'est-à-dires'il est exécuté dans le navigateur, cela bloquera l'interface utilisateur).

Les promesses/différés avec des fonctions synchrones ne sont pas d'une grande utilité.

Le modèle habituel ressemblerait à ceci :

function datapoints() {
   var d = $.Deferred()
   asyncCallToCreateDatapoints(function callback(data) {
      d.resolve(data)
   })
   return d;
}

datapoints().done(function result(data) {
   /* do stuff with data */
})

Answer 2

Essayez ce code:

function datapoints () {
    var deferred = $.Deferred();

    /* later, when data is ready, call:

        deffered.resolve(data);
    */

    return deferred.promise();
}


datapoints().then(function () {
    // runs when data is ready         
})

Answer 3

Pas d'air sûr quel est votre problème, mais ce Jsfiddle fonctionne bien pour moi.

function datapoints () {
    //My long function here where I define $data
    return {"datapoint1": 1, "datapoint2": 2};
};

var deferred = $.Deferred();

deferred.resolve(datapoints());

deferred.done(function result (data){
    // My function here where I use $data
    console.log("data: ", data);
});