O Desenvolvedor

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!