Function Order Execution - Help needed

fmtabbara · June 15, 2017, 11:28pm

Hi! Hope someone can help me with this small problem.

I have two functions getData() and createStreamer() I want to execute createStreamer() after getData() has finished.

function getData(){
			
 for(var i=0;i<arrNames.length;i++){

	$.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+arrNames[i]+"", function(result){	
						
	onlineUsers.push(JSON.stringify(result.stream));	
							
	gamers.push(result);
			});			
		};
	};

fmtabbara · June 15, 2017, 11:29pm

function getData(){
			
			for(var i=0;i<arrNames.length;i++){

				$.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+arrNames[i]+"", function(result){	
						
					onlineUsers.push(JSON.stringify(result.stream));	
							
					gamers.push(result);
				});			
			};
	};
				
		
	function createStreamers(){
		for(var i=0;i<arrNames.length;i++){
			if(onlineUsers[i]=="null"){
				streams.push(new streamer(arrNames[i],"offline");
			}
			else{
				streams.push(new streamer(gamers[i].stream.channel.name,gamers[i].stream.channel.game);
			}
		}
	}

midenfors · June 15, 2017, 11:54pm

Hello fmtabbara,

Since you’re making multiple asynchronous queries you can’t just use the callback function in the getJSON call, but you could try to set up a callback with jQuery’s ajaxStop (api.jquery.com/ajaxStop) function which will be called once all ajax requests has finished.

fmtabbara · June 16, 2017, 8:51am

Thank you!

That function works perfectly!

Many thanks

Fouad

adityaparab · June 16, 2017, 10:29am

There are other more sophisticated ways to semantically express the order in which your functions are to be executed.

You will use native javascript API called Promise. Here is an example of how you’d implement your code in Promise way.

First, make your getData function return a promise. You will implement it in such a way that it will resolve when your $.getJSON succeeds. And it will resolve itself with the data you receive from your $.getJSON

Since you’re making your $.getJSON calls in a loop, you will use Promise.all to identify if all your async calls are resolved.

function getData(){
  return new Promise((resolve, reject) => {
    let getJSONCalls = []; // this array will store all the promise states ($.getJSON calls)
    for(var i=0;i<arrNames.length;i++){
      getJSONCalls.push($.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+arrNames[i]));
  	}
  	//now once all the calls are returned, we want to resolve this getData promise
  	
  	Promise.all(getJSONCalls)
  	.then( data => {
  	  resolve(data);
  	})
  	.catch(error => {
  	  reject(error);
  	});
  	
  	//for more concise implemntation you can do the above like
  	//Promise.all(getJSONCalls).then(resolve, reject);
  })
};

Once you’re sure all the promises are resolved (using Promise.all(...).then...) you will call your createSteamers function. Also note that the createStreamers will receive onlineUsers as argument.
So you will modify your createStreamers function like

function createStreamers(onlineUsers){ // NOTE: onlineUsers is an argument to this function
	for(var i=0;i<arrNames.length;i++){
		if(onlineUsers[i]=="null"){
			streams.push(new streamer(arrNames[i],"offline"));
		} else{
			streams.push(new streamer(gamers[i].stream.channel.name,gamers[i].stream.channel.game));
		}
	}
}

And then this is how you will specify order in which your functions are to be called

getData()
.then(createStreamers)
.catch(err => console.log(err));