Цепочки функций обратного вызова через петлю в Javascript

Question

Я не хочу предварительно загружать изображения в одно и то же время, я хочу загрузить их один за другим. До сих пор я сделал это так:

for (var i = current; i < current + 5; i++) { 
    images[i].load(); 
} 

Так что я начал думать, как использовать функции обратного вызова, чтобы загрузить их последовательно: я могу передать функцию обратного вызова для load(callback), который будет называться после того, как был загружен один образ. Так что я могу также просто сделать это нравится, и они будут загружены после друг друга:

images[current].load(function(){ 
    images[current + 1].load(function(){ 
     images[current + 2].load(function(){ 
      images[current + 3].load(function(){ 
       images[current + 4].load(); 
      }); 
     }); 
    }); 
}); 

Это работает, но я хотел бы, чтобы превратить его в петлю. Я не могу крутить голову таким образом, чтобы достичь этого. Вы можете помочь?

---

Я могу только привести пример моего load(callback) метода, потому что это слишком долго:

load = function(callback){ 
    // do preloading things and simulate load event: 
    setTimeout(function(){ 
     callback.apply(this); 
    }, 1000); 
} 

Вот скрипку, чтобы проверить: http://jsfiddle.net/ajuc7g1q/1/

Answer 1

Я просто понял, как сделать это рекурсивно:

var call_chain = function(){}; 

for(var i = current + 5; i >= current; i--){ 
    (function(f, index){ 
     call_chain = function(){ 
      images[index].load(f); 
     }; 
    })(call_chain, i); 
} 

call_chain(); 

Answer 2

Возможно рекурсивная функция?

function loadImages(){ 
    var images = [img1, img2, ...]; 
    loadImage(images); 

} 

function loadImage(images){ 
    if(images.length){ 
     images.shift().load(function(){ 
      loadImage(images); 
     }); 
    } 
} 

Demo