javascript - suerte - ¿Cómo evitar las cadenas de devolución de llamada?

que hay detrás de las cadenas de whatsapp

Question

Necesito un montón de funciones para ser llamado en estricto orden. También es muy importante que la siguiente función espere hasta que la anterior haya finalizado.

Ahora mismo estoy usando callbacks encadenados:

callMe1(function(){
    callMe2(function(){
        callMe3(function(){

            callMeFinal();

        });
    });
});

Esto funciona pero parece ser un poco feo.

¿Alguna sugerencia para un enfoque diferente?

Answer 1

Envolviendo sus funciones, los argumentos están intactos, con una función anónima que juega junto con .queue también funciona.

Pasando Argumentos en Jquery.Queue ()

var logger = function(str, callback){
    console.log(str);
    //anything can go in here, but here''s a timer to demonstrate async
    window.setTimeout(callback,1000)
}

$(document)
.queue(function(next){logger("Hi",next);})
.queue(function(next){logger("there,",next);})
.queue(function(next){logger("home",next);})
.queue(function(next){logger("planet!",next);});

Ejemplo en JSFiddle: http://jsfiddle.net/rS4y4/

Answer 2

Es posible que desee pasar parámetros a las funciones, no creo que pueda hacerlo en el momento de escribir esto. Sin embargo...

function callMe1(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 1");
    this.x++;
    next();
}
function callMe2(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 2");
    this.x++;
    next();
}
function callMe3(next) {
    console.log(this.x);
    console.log("arguments=");
    console.log(arguments);
    console.log("/funct 3");
    this.x++;
    next();
}
var someObject = ({x:1});
$(someObject).queue(callMe1).queue(callMe2).queue(callMe3);

Answer 3

No estoy seguro de si esto te ayudaría, pero hay un gran artículo sobre el uso de aplazados en jQuery 1.5 . Podría limpiar un poco tu cadena ...

Además, mi respuesta en ¿Alguien me puede explicar la cola de jQuery tiene algunos ejemplos de cómo usar una cola para garantizar llamadas secuenciales?

Answer 4

Puede implementar un sistema de "pila":

var calls = [];

function executeNext(next) {
    if(calls.length == 0) return;
    var fnc = calls.pop();
    fnc();
    if(next) {
        executeNext(true);
    }
}

/*To call method chain synchronously*/
calls.push(callMe3);
calls.push(callMe2);
calls.push(callMe1);
executeNext(true);

/*To call method chain asynchronously*/
calls.push(callMe3);
calls.push(function(){
    callMe2();
    executeNext(false);
});
calls.push(function(){
    callMe1();
    executeNext(false);
});

Answer 5

Si usa jQuery, entonces puede usar la queue para encadenar las funciones.

$(document)
  .queue(callMe1)
  .queue(callMe2);

donde callMeX debería ser de forma:

function callMeX(next) {
    // do stuff
    next();
}