Executing a function after loop and post requests have ended

[Mad_Griffith]

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 January 6, 2018 by Mad_Griffith

[Ingolme]

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
  }
}

 

[Mad_Griffith]

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

[Ingolme]

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.

[Mad_Griffith]

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 January 17, 2018 by Mad_Griffith

[Ingolme]

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
  }
}

 

[Mad_Griffith]

Hi, thank you. Unfortunately I am getting "ImagesLoaded is not defined" (within handleImages())

[justsomeguy]

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

[Mad_Griffith]

my bad, the initializations were in a different function (though I had omitted "var" and therefore thought they were global). I moved them out in the global scope.