Jump to content
Mad_Griffith

Executing a function after loop and post requests have ended

Recommended Posts

Hi, I am trying to figure out how to execute a function at the end of the loop and after all the post requests have ended. Can anyone help, please?

for (var i = 0; i < arr.length; i++) {

  $.post().then(function() {
                               
    //some code

  });
                               
  if(isLastIteration) {

    func();

  }

}

Thank you!

Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

The most simple solution would have a global variable keeping count of the number of requests that have been completed.

var complete = 0;
for (var i = 0; i < arr.length; i++) {
  $.post().then(handleResponse);
}

function handleResponse() {
  complete++;
  if(complete == arr.length) {
    // Do something
  }
}

 

Share this post


Link to post
Share on other sites

Thanks! Picking up on your solution: what if I have 3 post requests and I have to load 3 images per request and I want to be sure that the "Do something" part is reached only when the last request's last image is loaded?

Would the following be correct?

 

var complete = 0;
for (var i = 0; i < arr.length; i++) {
  $.post().then(handleResponse);
}

function handleResponse() {
  complete++;

  var images = { 'title1' : 'http://url-to-img-1', 'title2' : 'http://url-to-img-2', 'title3' : 'http://url-to-img-3' };

  var imagesAmount = Object.keys(images).length;
  
  for (var img in images) {
    var imgObj = new Image();
    imgObj.src = images[img];
    img.onload = imagesLoaded++;
  }

  if(complete === arr.length && imagesLoaded === imagesAmount - 1) {
    // Do something
  }
}

 

Thanks

Share this post


Link to post
Share on other sites

The variable imagesLoaded has not been initialized anywhere, so its value is probably NaN (Not a Number). The onload property must be a reference to a function, currently you're assigning a number to it.

Share this post


Link to post
Share on other sites

Like this?

var complete = 0
for (var i = 0; i < arr.length; i++) {
  $.post().then(handleResponse);
}

function handleResponse() {
  complete++;

  var images = { 'title1' : 'http://url-to-img-1', 'title2' : 'http://url-to-img-2', 'title3' : 'http://url-to-img-3' };

  var imagesAmount = Object.keys(images).length,
  imagesLoaded = 0;
  
  for (var img in images) {
    var imgObj = new Image();
    imgObj.src = images[img];
    imgObj.onload = function() { 
        imagesLoaded++
    };
  }

  if(complete === arr.length && imagesLoaded === imagesAmount - 1) {
    // Do something
  }
}

 

Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

This is going to be more complicated. The image onload method is also asynchronous, so when the "Do something" line of code begins not all images will have been loaded yet. Since the images seem to be the same for all of the requests, you shouldn't load them in the handleResponse function, just load them outside.


// Load POST data
var complete = 0
for (var i = 0; i < arr.length; i++) {
  $.post().then(handleResponse);
}

// Load images
var images = { 'title1' : 'http://url-to-img-1', 'title2' : 'http://url-to-img-2', 'title3' : 'http://url-to-img-3' };
var imagesAmount = Object.keys(images).length,
var imagesLoaded = 0;

for(var img in images) {
  var imgObj = new Image();
  imgObj.src = images[img];
  imgObj.onload = handleImages;
}

// POST handler
function handleResponse() {
  complete++;
  testProcessComplete();
}

// Image handler
function handleImages() {
  imagesLoaded++;
  testProcessComplete();
}

// Check to see if everything is complete and, if so, run some code
function testProcessComplete() {
  if(complete == arr.length && imagesLoaded == imagesAmount) {
    // Do something
  }
}

 

Share this post


Link to post
Share on other sites

Well, did you define it in the same scope?  Are you using the correct case?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×