Jquery $get no se ejecuta en bucle for

[trompi33]

Mediante un bucle for hago varias peticiones $get para pedir las medidas de varias imágenes. Observo que primero se me ejecuta todo el bucle e inmediatamente después se ejecuta el mismo número de veces mis peticiones $get pero ya no me son útiles ya que antes debo de hacer ciertos cálculos.
¿Por qué me vienen los datos después de terminar todo el bucle?

Aquí el código con el cual pretendo mostrar tumbnails con un máximo de ancho o alto dependiendo de como sea el original.

function show(nfotos){
htmlfotos="";
for(k=0;k<20;k++){
camino='fotos/';
foto=camino+nfotos+'.jpg'; nfotos--;
$.get("medidas.php", {varfoto:foto}, function(datos){
medidas=datos.split("x"); ancho=medidas[0]; alto=medidas[1];
if(ancho<alto){
ancho=Math.floor((ancho*120) /alto);
margenizq='-'+((ancho/2)+4)+'px'; alto='120px'; ancho+='px';
}else{
alto=Math.floor((alto*120) /ancho);
margenizq='-64px'; ancho='120px'; alto+='px';
};
htmlfotos+='<div class=\"esquinas\" id=\"esquina'+k+'\"> <div class=\"contienefoto\" id=\"contienefoto'+k+'\" style=\"width:'+ancho+'; height:'+alto+'; border-top:0; border-left:0; border-right:1px solid #A5A7AA; border-bottom:1px solid #A5A7AA; padding:3px; background-color:#fff; position:absolute; bottom:-128px; left:50%; margin-left:'+margenizq+'\" > <a href=\"\"><img src=\"show_image.php?filename='+foto+'&width=200&h eight=200\" style=\"position:absolute; left:3px; top:3px; border:0px solid #f00; width:'+ancho+'; height:'+alto+'\" class=\"foto\" onmouseover=\"aumenta(this,'+k+')\" onmouseout=\"disminuye(this,'+k+')\" /></a> </div> <div class=\"esquinaspie\"><span class=\"pie\">'+ancho+'</span></div> </div>';
});
}
}

$(document).ready(function(){
$('#superior').html(htmlfotos);
. . . . .

Las medidas las traigo del medidas.php:
<?php
$medidas=getimagesize($_REQUEST['varfoto']);
$anchoalto=$medidas[0].'x'.$medidas[1];
echo $anchoalto;
?>

[mayid]

¿Por qué me vienen los datos después de terminar todo el bucle?

Porque estás sumando todo en una misma cadena en vez de insertar en el dom? Mirá:

Código:

htmlfotos+='<div class=\"esquinas\" id=\"esquina'+k+'\"> <div class=\"contienefoto\" id=\"contienefoto'+k+'\" style=\"width:'+ancho+'; height:'+alto+'; border-top:0; border-left:0; border-right:1px solid #A5A7AA; border-bottom:1px solid #A5A7AA; padding:3px; background-color:#fff; position:absolute; bottom:-128px; left:50%; margin-left:'+margenizq+'\" > <a href=\"\"><img src=\"show_image.php?filename='+foto+'&width=200&h eight=200\" style=\"position:absolute; left:3px; top:3px; border:0px solid #f00; width:'+ancho+'; height:'+alto+'\" class=\"foto\" onmouseover=\"aumenta(this,'+k+')\" onmouseout=\"disminuye(this,'+k+')\" /></a> </div> <div class=\"esquinaspie\"><span class=\"pie\">'+ancho+'</span></div> </div>';
...

Podrías poner esto dentro del bucle:

$('#superior').append(htmlfotos);

Con eso estás agregando datos directamente en el dom. Funciona casi como .html() pero sin sobreeescibir datos.

[trompi33]

He puesto unos alert en los sitios adecuados y veo que la función del $.get se ejecuta incluso después de cargar el DOM.

Código:

. . .
htmlfotos='prueba';
. . .
function show(){
alert(htmlfotos+' al inicio de la funcion');  <--1º en ejecutar
for(i=0;i<4;i++){
$.get("medidas.php", {varfoto:foto}, function(datos){
alert(htmlfotos+'-->al final del $.get');  <--4º y último en ejecutar
});
alert(htmlfotos+' al final de la funcion');  <--2º en ejecutar
}
$(document).ready(function(){
	alert(htmlfotos+'al comienzo del ready')  <--3º en ejecutar
. . .

Aparte de que la variable global htmlfotos no me la reconoce dentro de esta función del $.get
Gracias.

[mayid]

Si necesitás que el get realmente se ejecute segunda, podes usar llamadas sincronicas:

http://www.cristalab.com/tutoriales/...-jquery-c226l/

async
Determina que la cargada del objeto ajax se síncrona o asíncrona. Por lo general asíncrona es más útil, ya que la forma síncroa puede trabar el navegador hasta que la carga este completa
Boolean: true por defecto

La razón por las cual el get se está ejecutando último es que tarda más en obtener respuesta. Y mientras tanto da paso al resto del codigo por defecto (es asincronico).

[trompi33]

Efectivamente, ahora sí responde la llamada ajax a la vez que se va ejecutando el bucle for, ha quedado resuelto de la siguiente manera:

Código:

function show()
$.ajax({
type: "GET",
url: "medidas.php",
data: "ultimafoto="+nfotos,
async:false,
success: function(datos){
htmlfotos=datos;
. . .
}
}
}

De todas maneras, he optado por ejecutar el bucle for dentro del archivo php (es una opción), y que me vengan los datos todos juntos, creo que así ganaré en velocidad al hacer solamente una llamada ajax, corregidme si me equivoco.

El bucle for se va a ejecutar 20 veces que son las fotografías que voy a mostrar a la vez en pantalla y debía hacer 20 llamadas ajax para conseguir los tamaños, así con una sola llamada será más rápido.

Muchas gracias mayid.

[Dany_s]

exacto, si traes todo en una sola petición es mejor, y podés traer los datos por json o si traes html tratá de que sea limpio