javascript - tiempo - ¿La forma correcta de esperar que una función termine antes de continuar?

programacion asincrona javascript

Question

Tengo dos funciones JS. Uno llama al otro. Dentro de la función de llamada, me gustaría llamar al otro, esperar a que termine esa función y luego continuar. Entonces, por ejemplo / pseudo código:

function firstFunction(){
    for(i=0;i<x;i++){
        // do something
    }
};

function secondFunction(){
    firstFunction()
    // now wait for firstFunction to finish...
    // do something else
};

Se me ocurrió esta solución, pero no sé si esta es una forma inteligente de hacerlo.

var isPaused = false;

function firstFunction(){
    isPaused = true;
    for(i=0;i<x;i++){
        // do something
    }
    isPaused = false;
};

function secondFunction(){
    firstFunction()
    function waitForIt(){
        if (isPaused) {
            setTimeout(function(){waitForIt()},100);
        } else {
            // go do that thing
        };
    }
};

¿Eso es legítimo? ¿Hay una forma más elegante de manejarlo? Quizás con jQuery?

Answer 1

Parece que te falta un punto importante aquí: JavaScript es un entorno de ejecución de subproceso único. Veamos de nuevo tu código, nota que he agregado la alert("Here") :

var isPaused = false;

function firstFunction(){
    isPaused = true;
    for(i=0;i<x;i++){
        // do something
    }
    isPaused = false;
};

function secondFunction(){
    firstFunction()

    alert("Here");

    function waitForIt(){
        if (isPaused) {
            setTimeout(function(){waitForIt()},100);
        } else {
            // go do that thing
        };
    }
};

No tienes que esperar por isPaused . Cuando vea la alerta "Aquí", isPaused ya será false y se habrá devuelto firstFunction . Esto se debe a que no puede "ceder" desde adentro del bucle for ( // do something ), el bucle no se puede interrumpir y deberá completarse completamente primero (más detalles: manejo de hilos de Javascript y condiciones de carrera ).

Dicho esto, aún puede hacer que el flujo de código dentro de firstFunction sea ​​asincrónico y use una devolución de llamada o prometa notificar a la persona que llama. Tendría que darse por vencido en el ciclo y simularlo con if en if lugar ( JSFiddle ):

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

    var i = 0;
    var nextStep = function() {
        if (i<10) {
            // Do something
            printOutput("Step: " + i);
            i++;
            setTimeout(nextStep, 500); 
        }
        else {
            deferred.resolve(i);
        }
    }
    nextStep();
    return deferred.promise();
}

function secondFunction()
{
    var promise = firstFunction();
    promise.then(function(result) { 
        printOutput("Result: " + result);
    });
}

En una nota lateral, JavaScript 1.7 ha introducido la palabra clave yield como parte de los generators . Eso permitirá "perforar" los agujeros asincrónicos en el flujo de código JavaScript síncrono ( más detalles y un ejemplo ). Sin embargo, el soporte de navegador para generadores está actualmente limitado a Firefox y Chrome, AFAIK.

Answer 2

Una forma de lidiar con el trabajo asincrónico de esta manera es usar una función de devolución de llamada, por ejemplo:

function firstFunction(_callback){
    // do some asynchronous work
    // and when the asynchronous stuff is complete
    _callback();    
}

function secondFunction(){
    // call first function and pass in a callback function which
    // first function runs when it has completed
    firstFunction(function() {
        console.log(''huzzah, I/'m done!'');
    });    
}

Según la sugerencia de @Janaka Pushpakumara, ahora puede usar las funciones de flecha para lograr lo mismo. Por ejemplo:

firstFunction(() => console.log(''huzzah, I/'m done!''))