1

En los últimos días he tenido un problema que no he podido resolver, espero obtener su ayuda, por favor. El problema es el siguiente: Estoy creando una página la cual tiene un modulo en el que se crean inputs dinamicamente pero cada uno de esos inputs debe regresarme un json al hacer un llamado a la API que genera ese json por medio ajax y el método GET, Tengo que validar que cada cadena ingresada sea correcta o en su defecto obtengo una respuesta GET 404 NOT FOUND Lo estaba intentando solucionar con los http request pero solo me valida el primer input de todos los que se crean, he metido la validación en un ciclo for en el cual están todos los valores de los inputs pero siempre ejecuta al final de todo el proceso el código ajax.

Lo que pasa en el código es que se ejecuta el ciclo for sin ejecutarse la parte del código ajax, ya que el código ajax se ejecuta después de ejecutarse el for. Esto me confunde mucho, espero su ayuda

Código

function procesar(){

    var array = [];
    var maximo = 1300;
    var char2 = CKEDITOR.instances['semblanza'].getData().length;
    var maximolineas = 1300;
    var char2lineas = CKEDITOR.instances['lineas'].getData().length;
    var maximoproy = 1300;
    var char2proy =     CKEDITOR.instances['proyectos_vigentes'].getData().length;
    var cv = document.getElementById('cv').value;
    var lineas = document.getElementById('lineas').value;
    var semblanza = document.getElementById('proyectos_vigentes').value;
    var doiarray = document.getElementsByName('doi2[]');
    variable = true;

    for(var i = 0; i < doiarray.length; i++){

        var data = "http://api.crossref.org/works/"+doiarray[i].value;

        if(doiarray[i] != "" && variable == true){

            $.ajax({
                type: 'GET',
                url: data,
                success: function(data, textStatus) {
                    if(variable=true ){
                        alert(variable+"3");
                        variable= true;
                    }

                },error: function(xhr, textStatus, errorThrown){
                    variable = false;
                    alert("No se debe enviar formulario")
                    if(xhr.status=='405' || xhr.status=='404'){
                        alert("Ingresa una cadena valida")
                    }
                    console.log("No");
                }
             });

        }else{

            if(maximo>=char2 && maximolineas>=char2lineas && maximoproy>=char2proy){
                 variable = true;
                 alert(variable+"6");
             }else{
                 variable = false;
                 alert(variable+"8");
                 alert("Numero de caracteres sobrepasados")
             } 
         } 
     }

     if (variable == true ){
        document.forms['data'].submit()
     }
  }
2
  • Primero, pega tu código acá, el screenshot no nos sirve de mucho. Segundo, creo que retornar 404 para expresar un error es una mala idea, porque no vas a poder distinguir ese error de un 404 real. Mejor sería usar header 400. Tercero, tu pregunta real está en el último párrafo. Debieras empezar por explicar ese problema.
    – ffflabs
    Commented el 25 mar. 2017 a las 16:33
  • He editado la pregunta :D Commented el 25 mar. 2017 a las 17:00

2 respuestas 2

2

Siempre ejecuta al final de todo el proceso el código ajax. Lo que pasa en el código es que se ejecuta el ciclo for sin ejecutarse la parte del código ajax, ya que el código ajax se ejecuta después de ejecutarse el for. Esto me confunde mucho, espero su ayuda.

Hay varios concetos que se están escapando en tu pregunta. Una, es el concepto de asincronía y el otro, en cómo trabaja var en ES5.

Asincronía

Se entiende por codigo asíncrono al código que no mantiene un flujo de sincronización entre instrucciones. Un código síncrono mantiene una relación entre la ejecución de un proceso y la respuesta esperada; mientras que un código asíncrono no mantiene ninguna relación. Un código asíncrono no "espera" la respuesta de una ejecución; en su lugar, "se adelanta a ésta (futuro)" para saber qué hacer cuando suceda.

El ejemplo más práctico y básico de un código asíncrono son los callbacks:

function doSomeTask(cb) {
  ...
  cb(result);
}

Un callback es una función que manejará la respuesta una vez que esta sea obtenida. Es como decir: haz algo, cuando termines, ejecuta esto.

Un concepto importante sobre código asíncrono es que, no hay forma de saber en qué momento se producirá la respuesta, ya que ésta depende de diversos factores, incluso externos (latencia, etc.) y el flujo del programa seguirá sin curso sin esperar por dicha respuesta. Esta es una de las razones por la que se propuso la especificación Promise para ES6.

Ámbito y alcance de variables

En ECMAScript 5, versión del 2006 hasta mediados 2015, solo existía una manera de declarar variables y este era por medio de var. Pero había un problema: las variables declaras con var no tienen un ámbito de alcance fijo, siempre se limitan a dos: ámbito de función y ámbito global.

Cuando declaras una variable, en el lugar en donde se declare, su ámbito sigue siendo la función en donde se le declara o, en su defecto, window. Toma como ejemplo el siguiente código:

function doSomeTask () {
  if (true) {
    var x = 123;
  } else {
    // x sigue disponible aquí
  }
}

Esto es llamado hoisting y sucede así por cuestiones de diseño del lenguaje. La realidad, es que x no está declarada como variable local, si no, como de función. De esta manera, la función anterior es interpretada de la siguiente manera:

function doSomeTask () {
  var x;

  if (true) {
    x = 123;
  } else {
    // por eso x es visible aquí
  }
}

¿Qué relación tiene esto con tu problema? Pues directa nada, pero indirectamente sí tiene que ver.

Cuando usas una variable declarada con var dentro de un for y es usada dentro un callback, esta variable será tomada como referencia, siendo en todas las iteraciones, el valor de la última iteración.

Hay dos soluciones a este problema:

  • Usar un closure
  • Usar let (ES6)

Usando un closure o una IIFE lo que haces crear un nuevo entorno de ejecución en cada iteración y la variable es pasada como parámetro y como es de conocimiento público, las variables en JavaScript son pasadas por valor.

for (var i = 0; i < 10; i++) {
  (function (x) {
    // proceso asíncrono
  })(i);
}

La otra opción es mucha más limpia:

for (let i = 0; i < 10; i++) {
  // proceso asíncrono
}

Sin embargo, cuando se quiere realizar procesos asíncronos secuencialmente, una opción es hacer el código síncrono/bloqueante. Esto lo puedes lograr haciendo uso de recursividad.

function validateInput(index = 0) {
  if (doiarray.length - 1 === index) { return; }

  var data = "http://api.crossref.org/works/"+doiarray[index].value; 

  if (doiarray[index] !== "" && variable === true) {
    $.ajax({
     url: data,
     ...
    })
    .done(function (res) {
      ..
      validateInputs(index + 1);
    })
    .fail(function (xhr, status, err) {
      ..
      validateInputs(index + 1);
    });
  } else {
    ...
    validateInputs(index + 1);
  }
}

La función se ejecutará una y otra vez hasta que se hayan recorrido todos los elementos de doiarray. Es una forma práctica y directa de hacer lo que deseas.

3
  • +1, muy completa tu respuesta. Pero en el ejemplo de Jesus, la variable data no está siendo usada en el callback, está siendo usada para conformar la URL, por lo que siempre será diferente. El problema es que a la respuesta del servidor también le puso data, pero esta es otra variable, visible solo en el ámbito del callback.
    – ElChiniNet
    Commented el 1 abr. 2017 a las 9:55
  • Aunqué se esté ocultado la variable data en el callback del done no tiene por qué afectar la ejecución del código simplemente porque no se usa, por lo tanto, es irrelevante.
    – gugadev
    Commented el 1 abr. 2017 a las 11:17
  • Exacto, es lo que intenté decir en mi comentario. En este caso la variable data no será una referencia de la última iteración, sino que en cada iteración tendrá un valor diferente, es quizás por esto que aclaraste que no tenía una relación directa con su problema o quizás no interpreté bien esa parte :)
    – ElChiniNet
    Commented el 1 abr. 2017 a las 11:24
1

He notado que esta respuesta y esta otra no han bastado para que comprendas definitivamente en qué consiste un código asíncrono. Intentaré explicártelo con unos ejemplos sencillos antes de ver los errores en tu código, porque hasta que no comprendas este concepto creo que no deberías continuar trabajando con llamadas Ajax.

En un código asíncrono cada operación no espera por la respuesta de otra para evaluarse. Las operaciones son evaluadas al mismo tiempo y el resultado de cada una de estas lo tendrás cuando recibas la respuesta (esto ocurrirá después que tu código haya sido evaluado completamente). Por ejemplo, analiza el siguiente snippet:

var variable = true;

setTimeout(function() {

  if (variable === true) {

    console.log("perfecto, el valor es true");

  }

}, 1000);

variable = false;

El anterior código es evaluado completamente al inicio, pero la condición que evalúa si la variable variable tiene valor true se hará cuando se ejecute el setTimeout y este se ejecutará después de un segundo y en ese momento la variable tendrá valor false ya que al final del código se ha declarado así, por lo tanto el console.log que se encuentra dentro de la condición nunca llegará a ejecutarse.

Ahora evalúa el siguiente snippet:

for (var i = 0; i < 4; i++) {

  setTimeout(function () {

    console.log("la variable i tiene valor " + i);

  }, 2000);

}

Cada uno de los setTimeout que se encuentran dentro del ciclo es evaluado en cada iteración pero no ejecutarán su código hasta que transcurran dos segundos. Cuando los dos segundos hayan transcurrido los cuatro setTimeout se dispararán y en ese momento el valor de la variable i será 4 (es el valor en que el ciclo termina).

Pues de una manera parecida funciona una llamada Ajax de manera asíncrona (por defecto una llamada Ajax es asíncrona). Es una llamada que estás realizando a un servidor y este te devolverá la respuesta en algún momento, pero ese momento siempre será después que todo tu código haya sido evaluado. Por lo tanto, el siguiente código:

var variable = true;

$.get("/rest/api/", function() {

    if (variable === true) {

        console.log("perfecto, el valor es true");

    }

});

variable = false;

Nunca lanzará el console.log de la misma manera que el primer ejemplo no lo lanza.

Y el siguiente código:

for (var i = 0; i < 4; i++) {

    $.get("/rest/api/", function () {

        console.log("la variable i tiene valor " + i);

    });

}

Te lanzará cuatro console.log con la variable i con valor 4 y no precisamente los cuatro serán ejecutados al mismo tiempo.

Si has entendido esto, entonces tendrás respuesta para la siguiente pregunta que realizas:

Lo que pasa en el código es que se ejecuta el ciclo for sin ejecutarse la parte del código ajax, ya que el código ajax se ejecuta después de ejecutarse el for. Esto me confunde mucho, espero su ayuda

Si esto te ha quedado claro, entonces debes analizar que la función que es ejecutada en cada llamada Ajax se disparará después que todo tu código se haya evaluado y se reciba respuesta del servidor. Por lo tanto, la variable variable no tiene por qué tener el mismo valor que tenía al inicio, ya que es una variable global y cambias su valor en el else de tu condición dependiendo del valor de los demás inputs.

Por otro lado, tienes un pequeño error en la siguiente condición:

if( variable = true ) {
    alert(variable + "3");
    variable = true;
}

El operador de igualdad es == y el de igualdad estricta es ===. Con el anterior código le estás asignando valor true a la variable y la condición siempre se cumplirá.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.