Возвращение из глубоких замыканий

Question

Если у меня есть некоторый код, например -

loadImages(pos - 1,function(){ 
     loadImages(pos,function(){ 
      loadImages(pos + 1);  
     }); 
    }); 

function loadImages(key){ 
    $('.slide:nth-child('+key+') .imgholder').each(function(){ 
     par = $(this).parent(); 
     imgHold = $(this); 

     if (loaded_images.indexOf($(imgHold).data('img-src')) > 0){ 
      return true; 
     } else {   
      $(imgHold).attr('src',$(imgHold).data('img-src')).on('load', function() { 
       if (!$(imgHold).hasClass('fgimg')){     
        $(par).css('background-image','url('+$(imgHold).data('img-src')+')');     
       } else { 
        $(imgHold).css('visibility','visible'); 
       }     

       // How do I return loadImages from here?? 
      })  
     } 
    }) 
} 

Я хочу, чтобы вызвать код после того, как эта функция завершена, поэтому мне нужно вернуться верно в моей // строки комментария. Каков официальный/лучший способ сделать это?

Answer 1

Вам нужен обратный вызов:

function loadImages(key, callback){ 
    $('.slide:nth-child('+key+') .imgholder').each(function(){ 
     par = $(this).parent(); 
     imgHold = $(this); 

     if (loaded_images.indexOf($(imgHold).data('img-src')) > 0){ 
      return true; 
     } else {   
      $(imgHold).attr('src',$(imgHold).data('img-src')).on('load', function() { 
       if (!$(imgHold).hasClass('fgimg')){     
        $(par).css('background-image','url('+$(imgHold).data('img-src')+')');     
       } else { 
        $(imgHold).css('visibility','visible'); 
       }     
       callback(true); 
       // How do I return loadImages from here?? 
      })  
     } 
    }) 
} 

Использование:

loadImages(key, function(yourVar){ 
    console.log(yourVar); // true 
}); 

Вы должны обратить внимание на случаи, когда обратного вызова не вызывается.

Подробнее: http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/