Mad_Griffith Posted January 6, 2018 Share Posted January 6, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2018 Share Posted January 6, 2018 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 More sharing options...
Mad_Griffith Posted January 17, 2018 Author Share Posted January 17, 2018 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 More sharing options...
Ingolme Posted January 17, 2018 Share Posted January 17, 2018 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 More sharing options...
Mad_Griffith Posted January 17, 2018 Author Share Posted January 17, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 17, 2018 Share Posted January 17, 2018 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 More sharing options...
Mad_Griffith Posted January 17, 2018 Author Share Posted January 17, 2018 Hi, thank you. Unfortunately I am getting "ImagesLoaded is not defined" (within handleImages()) Link to comment Share on other sites More sharing options...
justsomeguy Posted January 17, 2018 Share Posted January 17, 2018 Well, did you define it in the same scope? Are you using the correct case? Link to comment Share on other sites More sharing options...
Mad_Griffith Posted January 18, 2018 Author Share Posted January 18, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now