jquery ajax() asíncrono falsa

Question

he problema ..

for(a=1;a<10;a++){ 
    $(".div").append("<div id="+a+"></div>") 
     $.ajax({ 
       url: "file.php", 
       data: "a="+a, 
       type: "POST", 
       async: false, 
       success: function(data) { 
       $("#"+a).html(data); 
       } 
     }); 

} 
$("div").click(function(){ 
     alert("it works"); 
}); 

problema es: es que no puso en su lugar async: false datos de archivo.php son sólo en última div con id por lo 9 pero ahora hay async: false - lo que los datos están en cada div por lo que es bueno

pero si quiero hacer clic mientras se estaba cargando por el Ajax no funciona (sólo después de terminado todo ajax-eS)

cómo resolver este problema? (Tal vez la falsa es que estoy usando ajax. Puedo utilizar getJSON etc ..)

gracias por ayudar a

Answer 1

Si desea que el usuario sea capaz de utilizar la interfaz mientras la llamada Ajax se está ejecutando, debería cambiar su async a true. James Allardice también ha señalado que, en este escenario, debe utilizar un cierre de JavaScript para conservar el valor de su id original para cuando se devuelva la llamada ajax. Para obtener más información sobre los cierres de javascript, consulte how-do-javascript-closures-work, una muy buena pregunta que se encuentra aquí en stackoverflow.

for(id = 1; id < 10; id++){ 
    $(".div").append("<div id='" + id + "'></div>"); 

    (function(id) { 
     $.ajax({ 
      url: "file.php", 
      data: "a=" + id, 
      type: "POST", 
      async: true, 
      success: function(data) { 
       $("#"+ id).html(data); 
      } 
     }); 
    }(id)); 
} 

Answer 2

Una buena solución para esto es usar una función recursiva.

function appendDivs(limit, count) { 
    count = count || 1; 
    if (count <= limit) { 
     $(".div").append("<div id=" + count + "></div>"); 
     $.ajax({ 
      url: "file.php", 
      data: "a=" + count, 
      type: "POST", 
      async: true, 
      success: function(data) { 
       $("#" + count).html(data); 
       appendDivs(limit, count + 1); 
      }, 
      error: function(e) { 
       alert('Error - ' + e.statusText); 
       appendDivs(limit, count + 1); 
      } 
     }); 
    } else { 
     return false; 
    } 
} 
appendDivs(10);