Estou desenvolvendo um projeto para um cliente da GS Solutions onde um template será montado dinâmicamente no front-end através do consumo de vários JSONS.
Em um caso específico eu preciso gerar uma lista (array) de jogos, que estão divididos em 3 arquivos JSON diferentes e uma rotina deve ser executada depois desta lista populada.
Como fazer isso de forma assíncrona após o carregamento dos 3 arquivos por ajax?
jQuery.when()
A função when do jquery permite que você execute um callback após uma série de ações terem sidos realizadas, como o carregamento assíncrono de quantas URLs você precisar.
Exemplo
Quero carregar jogos-1.json e jogos-2.json, percorrer os elementos de cada uma delas e adicionar em um array. Feito isso, quero percorrer este array e imprimir os resultados.
var jogos = [];
$.when(
$.getJSON('jogos-1.json'),
$.getJSON('jogos-2.json')
).done(function(jogos1,jogos2){
/* Será executado somente após as 2 requisições ajax serem carregadas
Aqui você poderia manipular os dados (jogos1 e jogos2),
fazer merge dos objetos, ordenar, etc. */
for (var jogo in jogos1){ jogos.push(jogo) }
for (var jogo in jogos2){ jogos.push(jogo) }
});
Um exemplo bem simples mas que exemplifica uma forma eficiente de fazer o carregamento assíncrono mesmo quando nós precisamos de todos os request completos antes de executar o callback.
Você pode adicionar quantos eventos forem necessários como parâmetros na função when e deve adicionar o mesmo número de parâmetros na função dentro do done, cada parâmetro representa um resultado do when.
Tem mais dicas? Escreva nos comentários!