Jump to content

Executing a function after loop and post requests have ended


Mad_Griffith
 Share

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
Link to comment
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
  }
}

 

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
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.

Link to comment
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
Link to comment
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
  }
}

 

Link to comment
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
 Share

×
×
  • Create New...