jQuery $ .get () dentro do escopo do loop

Eu sou novo em trabalhar com o AJAX, mas venho pesquisando nas últimas duas horas para ajudar no meu cenário. Eu não fiz nenhum progresso. 🙁

Independentemente, meu problema é que o array subPages está fora do escopo quando estou fora de $ .get (…). Eu tentei usar when () e done () para o meu código, mas não consigo acertar ainda.

Eu acho que o problema está dentro das iterações passando por um loop for, pois eu tenho páginas [i] em várias seções do meu código sendo usado. É por isso que não posso usar when () e done () quando necessário.

Aqui está o que eu tenho:

var subPages = []; var containsSub = '/sites/Pages/'; var tempString = ''; // iterate through the pages array in reverse for(var i = pages.length - 1; i >= 0; i--){ // grab all  within response text var getLinks = $.get(baseURL + pages[i]).then(function(responseData){ var $response = $(responseData); var $links = $response.find('a'); // push each valid link into subPages array $links.each(function(index, $link){ if(this.href.indexOf(containsSub) > -1){ subPages.push(this.href); } }); // subPages array is loaded with the correct values console.log("subPages inside get: " + subPages); }); // empty here console.log("subPages outstide all: " + subPages); 

Edit: Com a adição da cadeia de então e código, estou tendo um indefinido para subpáginas [i]

 var subPages = []; var containsSub = '/sites/Pages/'; var tempString = ''; // iterate through the pages array in reverse for(var i = pages.length - 1; i >= 0; i--){ // grab all  within response text var getLinks = $.get(baseURL + pages[i]).then(function(responseData){ var $response = $(responseData); var $links = $response.find('a'); // push each valid link into subPages array $links.each(function(index, $link){ if(this.href.indexOf(containsSub) > -1){ subPages.push(this.href); //console.log("" + this.href + "" + " 
"); } }); console.log("subPages inside get: " + subPages); }) .then(function(){ console.log("subPages outstide all: " + subPages); // print bold for current main page tempString += "" + pages[i].substr(27,pages[i].length) + "" + "
"; for(var i = 0; i < subPages.length - 1; i++){ console.log("" + subPages[i] + "" + "
"); } subPages = []; pages.splice(i, 1); }) }

11/25 Edit: Eu corri o problema abaixo com a minha resposta removendo algumas complicações e decidi que uma requisição AJAX estava mais lógica.

 var subPages = []; var containsSub = '/sites/it/InfoProtect/Pages/'; var tempString = ''; // iterate through the pages array in reverse for(var i = pages.length - 1; i >= 0; i--){ // grab all  within response text var getLinks = $.ajax({ url: baseURL + pages[i], async: false, success: function(responseData){ var $response = $(responseData); var $links = $response.find('a'); // push each valid link into subPages array $links.each(function(index, $link){ if(this.href.indexOf(containsSub) > -1){ subPages.push(this.href); } }); } }) 

Seu loop for imediatamente executa todas as iterações do loop. A matriz subPages é preenchida após a última linha do console.log executada.

$.get é asynchronous, então depois de chamá-lo, o código dentro de .then é chamado imediatamente . Assim, continua até a próxima iteração do seu loop, finalmente sai e mostra uma matriz de subpages vazia, porque seus dados ainda não retornaram.

Aqui está uma idéia rápida de como esperar por suas chamadas ajax, antes de registrar a matriz (não testado):

 var ajaxCalls = []; // iterate through the pages array in reverse for(var i = pages.length - 1; i >= 0; i--){ // grab all  within response text var getLinks = $.get(baseURL + pages[i]).then(function(responseData){ var $response = $(responseData); var $links = $response.find('a'); // push each valid link into subPages array $links.each(function(index, $link){ if(this.href.indexOf(containsSub) > -1){ subPages.push(this.href); } }); // subPages array is loaded with the correct values console.log("subPages inside get: " + subPages); }); ajaxCalls.push(getLinks); } $.when.apply(null, ajaxCalls).then(function() { // not empty here console.log("subPages outstide all: " + subPages); }); 

problema é que a matriz subPages está fora do escopo quando estou fora $ .get (…)

$.get() retorna uma resposta assíncrona. Tente encadear .then() para $.get() para manter o mesmo escopo da inicial. .then()

 var getLinks = $.get(baseURL + pages[i]).then(function(responseData){ }) .then(function() { console.log("subPages outstide all: " + subPages); }) 

Tente criar um IIFE dentro for loop para passar i

por exemplo,

 var pages = ["a", "b", "c"]; for(var i = pages.length -1; i >= 0; i--) { (function(j) { var dfd = $.Deferred(function(d) { setTimeout(function() { d.resolve(j) }, Math.random() * 1000) }).promise() .then(function(n) { console.log("first", n, pages[n]); return n }).then(function(res) { console.log("second", res, pages[res]) }) }(i)) }