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

可能是一个递归函数？

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

}

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

<强> Demo

Answer 2

我只是想出了如何递归地做到这一点：

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();

在Javascript中通过循环链接回调函数

2 个答案: