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

Chaining Callback Functions through a Loop in Javascript

本文关键字：链接 回调 函数 循环 Javascript      更新时间：2023-09-26

我不想同时预加载我的图像了，我想一个接一个地加载它们。到目前为止，我是这样做的:

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/

可能是递归函数?

function loadImages(){
  var images = [img1, img2, ...];
  loadImage(images);
}
function loadImage(images){
  if(images.length){
      images.shift().load(function(){
          loadImage(images);
      });
  }
}

我刚刚想出了递归的方法:

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();
相关文章：