Amigo las peticiones ajax son asincrónicas lo que quiere decir que no sabes cuando dure en volver la respuesta.
Por eso el for
si ejecuta las peticiones pero la variable i
la obtiene al volver osea después de el tiempo que tomo en ir y hacer la petición así que i
vale 10
porque el tiempo de el for
es mucho mas rápido que el de cada petición dentro de el.
Espero te ayude saludos.
NOTA: Se uso un API de prueba para hacer la consulta.
Ejemplo
var root = 'https://jsonplaceholder.typicode.com';
for(var i = 0; i < 10; i++) {
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(i);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Solucion
Si quieres puedes hacer una function re cursiva que solo se ejecuta al retornar el ajax seria como tu propio for
La idea es ejecutar el ajax y que al retornar llame a la misma funcion pero con la variable de condición con un numero mas hasta que se cumpla y no se ejecute mas el Ajax.
Ejemplo funcional
var root = 'https://jsonplaceholder.typicode.com';
var numero = 0
function miFor(numero){
if(numero<10){
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(numero);
numero++
miFor(numero)
});
}
}
miFor(0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>