Espere hasta que varias funciones, que pueden o no llamar a ajax internamente, estén completas en jQuery?

Question

Actualmente estoy validando algunas entradas en el lado del cliente. Cuando el usuario envía el formulario, quiero verificar los valores de las entradas del formulario, y luego hacer algo una vez que todas las verificaciones estén completas

$('form').submit(function() {
    var input1 = $('form #input1');
    var input2 = $('form #input2');

    //validate both input values
    validate_input(input1);
    validate_input(input2);

    //wait until all validation complete to execute code here

    return false;
});

Aquí, la función "validate_input" verificará el valor de entrada. Si pasa las verificaciones iniciales (como la longitud de los caracteres), realizará una solicitud AJAX para una validación adicional (por ejemplo, verificar si se toma el nombre de usuario). Algo como esto:

function validate_input(input){
    value=input.val();
    if (value.length<4){
        //code to execute if input is too short
    }
    else {
        $.ajax({             
            type: 'get',
            url: check_input_url,
            data: input.serialize(),
            success: function(data){
                if (data=="invalid") {
                    //code to execute if invalid
                } else {
                    //code to execute if valid
                }
            }
        });
    }
}

Actualmente estoy usando las funciones jQuery.when () y .done (), pero la función done () no espera hasta que todas las funciones validate_input estén completas (incluidas las devoluciones de llamada AJAX llamadas desde validate_input)

$.when(
    validate_input(input1),
    validate_input(input2)
).done(function(){
    //code here
});

¿Cómo esperaría hasta que todas las funciones validate_input estén completas (terminadas con posibles devoluciones de llamada AJAX), antes de ejecutar más código?

javascript jquery ajax jquery-deferred

0

mrl 3 sep. 2014 a las 22:24

Answer 1

No veo que la función validate_input devuelva nada. Si quiere esperar, debe devolver una promesa, para no pasar undefined a $.when():

function validate_input(input){
    var value=input.val();
    if (value.length<4){
        return …; //code to execute if input is too short
    } else {
        return $.ajax({
 //     ^^^^^^
            …
        });
    }
}

3

Bergi 3 sep. 2014 a las 18:35

Answer 2

ACTUALIZACIÓN: acabo de actualizar mi respuesta. ahora es más probable que se ajuste a sus necesidades. He agregado un parámetro a la función de devolución de llamada.

Usar devoluciones de llamada con funciones anónimas y encadenarlas:

1. agregue un parámetro para la función de devolución de llamada y la llamada a la función de devolución de llamada:

function validate_input(input, callback){
    value=input.val();
    if (value.length<4){
        //code to execute if input is too short
        callback(false);
    }
    else {
        $.ajax({             
            type: 'get',
            url: check_input_url,
            data: input.serialize(),
            success: function(data){
                if (data=="invalid") {
                    //code to execute if invalid
                    callback(false);
                } else {
                    //code to execute if valid
                    callback(true);
                }
            }
        });
    }
}

2. cuando llame a su función varias veces, encadénela con funciones anónimas (que se ejecutan después de success en su $.ajax: la solicitud se ha activado):

$('form').submit(function() {
    var input1 = $('form #input1');
    var input2 = $('form #input2');

    //validate both input values
    validate_input(input1, function(result){
        if(result == true)
        {
             validate_input(input2, function(result){
                 if(result == true)
                 {
                    //wait until all validation complete to execute code here
                 }
                 else
                 {
                    return false;
                 }
             });
        }
        else
        {
            return false;
        }
    });
});

-1

low_rents 3 sep. 2014 a las 18:42

Answer 3

var inputsLength = 0, // or maybe set it to $('form input').length
    inputsReady = 0;
function checkInputsValidation(){
    if (++inputsReady === inputsLength) YOURSALLINPUTSAREVALIDFUNCTION();
}
function validate_input(input){
    inputsLength++; // remove it if you already set inputsLength
    // blablabla
    $.ajax({             
        type: 'get',
        url: check_input_url,
        data: input.serialize(),
        success: function(data){
            if (data=="invalid") {
                //code to execute if invalid
            } else {
                checkInputsValidation();
            }
        }
    });
}

0

Novelist 3 sep. 2014 a las 18:40

Espere hasta que varias funciones, que pueden o no llamar a ajax internamente, estén completas en jQuery?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript