Adi Biton
Jun 24, 2015 • 2 min read

Wait until all ajax requests are done

During some code review with my teammate we tackled a code where we wanted to call some method only after two asynchronous calls finished processing.

Doing it with jQuery is pretty simple, jQuery has the when function and you can use it like this:

1
2
    $.when(ajax1(),ajax2()).done(function(a1, a2){
	    console.log("ajax1() and ajax2() finished"});  

Where ajax1 and ajax2 functions returns Deferred object:

1
2
3
4
5
6
7
8
9
10
11
12
13
	function ajax1(){
		return $.ajax({
		    type: 'GET',
		    url: 'index.html'
		}).done(function(){ console.log("index.html"); });
	}
	   
	function ajax2(){
		return $.ajax({
			type: 'GET',
			url: 'about.html'
		}).done(function(){ console.log("about.html"); });
	}  

Running it will output (first and second lines can change places):

index.html  
about.html  
ajax1() and ajax2() finished

There is some other way to implement it with vanilla javascript - using the Promise object (ES6 feature - available on Chrome 43)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    var oPromise1 = new Promise(
	function(resolve, reject) {
		$.ajax({type: 'GET', url:'index.html'}).done(
			function(data, message) {
				resolve(message);
			});
		});
	
	var oPromise2 = new Promise(
	function(resolve, reject) {
		$.ajax({type: 'GET', url:'index.html'}).done(
			function(data, message) {
				resolve(message);
			});
		});
	
	Promise.all([oPromise1, oPromise2]).
	then(function(a){
		console.log(a); 
	});  
Post by: Adi biton