Problemas al utilizar Deferred/When en jquery para aplazar una función

Question

Realmente estoy teniendo dificultades para usar Deferred o When con mi script jquery.He leído varios artículos aquí y en otros lugares (incluido api.jquery.com) y creo que soy demasiado principiante para entender exactamente cómo usar estas llamadas.

Estoy intentando aplazar la ejecución de una función hasta que se haya completado una función anterior en mi secuencia de comandos.

Tengo

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

cuyo resultado es una matriz llamada $data.Necesito que esa variable $data esté definida para mi siguiente función, así que quiero aplazarla.

Intenté configurar el aplazamiento de esta manera:

var deferred = $.Deferred();

deferred.resolve(datapoints());

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

Realmente agradecería algunos consejos sobre cómo limpiar esto.Intenté recrear varios ejemplos, pero el resultado cada vez es un error de consola que dice que $data no está definido.Sé que el código funciona porque cuando introduzco manualmente un setTimeout de unos segundos antes de ejecutar la segunda función, todo funciona bien, pero creo que aplazar es una mejor solución.

¡Gracias de antemano!

Answer 1

Intente arreglar su código de esta manera:

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

Esto garantizará que los datos que está utilizando sean en realidad los datos devueltos por datapoints().

También debe tener en cuenta que, a menos que datapoints() es una función asíncrona, el código que escribiste bloqueará el hilo JS (es decir,si se ejecuta en el navegador, bloqueará la interfaz de usuario).

Las promesas/diferidos con funciones síncronas no son de mucha utilidad.

El patrón habitual sería algo como esto:

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

Pruebe este código:

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

No enérgicamente seguro cuál es su problema, pero esta jsfiddle está funcionando bien para mí.

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