javascript - 通过 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);
} 

这里有一个 fiddle 来测试它:http://jsfiddle.net/ajuc7g1q/1/

Answer 1

可能是递归函数？

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

}

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

Demo