Execute Slick code after a jQuery each loop is finished

Run a “then” function as an “each jQuery” call is completed. The worse way to do it is to have a setTimeout delay before to call the function you wish. The good way to do it is to use promise to set a callback after all asynchronous each loop are completed.

How to invoke a jQuery function after .each() has completed

I needed to invoke a Slick.js call after a loop end. With JavaScript, I filled my slider content with the data coming from my DOM elements to create a navigation based on the page content. However, even if it worked I had the following error in my console.log “Uncaught TypeError: Cannot read property ‘add’ of null … slick.js” because this call tried to be executed at the same time as my loop and not after the each / for each loop was fully executed.

The solution to call a function after the each loop is to use Promise.

$(element).each(function(){
	// fill my data from each "element" from my data
}).promise().done(function(){
	// initialise the slider
	$('.slider').slick();
});

Hope this helps.