how can I call another function after completing each function?

Question

$('.chide').each(function(index) {
        setTimeout(function(el) {
        el.animate({opacity:0});
       }, index * 200, $(this));
 });

I want to run another function after completed above function how can I do that please help..

Answer 1

i think this was you can achieve your solution here

$('.chide').each(function(index) {
        setTimeout(function(el) {
        el.animate({
          opacity:0,
          complete: function(){
                       alert('call your another function here you can write here with return as well can create a function here aswell you can just call the function here that is created ');
                    } 
        });
       }, index * 200, $(this));
 })

here i have created example with working code using only divs

$(document).ready(function(){
    $('div').each(function(index) {
       console.log(index);
       $(this).animate({
          opacity:1,
          height: "toggle",          
       }, index * 2200,function(){
         $(this).show();
       });       
    })
})

div{
 width : 100px;
 height: 100px;
 border: 2px solid grey;
}

<div>

 </div>
 <div>
  
 </div>
 <div>
  
 </div>
 <div>
  
 </div>
 <div>
  
 </div>

Answer 2

If your app/site can use modern features use Promises.

Promise.all(arrayOfPromises).then(function(arrayOfResults) {
  //...
});

Its sane way of organizing your code, some solid polyfills are available: http://www.html5rocks.com/en/tutorials/es6/promises/