Chaining Callback Functions through a Loop in Javascript

Question

I don't want to preload my images at the same time anymore, I want to load them one after each other. Until now I did it like this:

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

So I began to think how to use callbacks to load them sequentially: I can pass a callback to load(callback), which will be called after one image has been loaded. So I can also just do it like this and they will be loaded after each other:

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

This works, but I would love to transform it into a loop. I can't twist my head in a way to achieve this. Can you help?

I can only provide an example of my load(callback) method, because it is too long:

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

Here's a fiddle to test it: http://jsfiddle.net/ajuc7g1q/1/

I posted an example of my load function and a fiddle to test it! — YMMD
– YMMD, Commented Aug 17, 2014 at 5:37

PSL · Accepted Answer · 2014-08-17 05:46:59Z

1

Probably a recursive function?

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

}

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

Demo

edited Aug 17, 2014 at 5:46

answered Aug 17, 2014 at 5:33

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

YMMD Over a year ago

Sorry, I forgot to mention that I don't always want to load all of the images, but only about five starting from a given index. Here is an example: jsfiddle.net/ajuc7g1q/1

Jeremy J Starcher Over a year ago

Clean solution, but a minor technical point. This isn't recursive, as there is only onc instance of LoadImage on the stack at a time. Recursive specifically means there is something to return back to.

YMMD · Accepted Answer · 2014-08-18 16:57:08Z

0

I just figured out how to do it recursively:

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

answered Aug 18, 2014 at 16:57

YMMD

3,8203 gold badges35 silver badges44 bronze badges

Collectives™ on Stack Overflow

Chaining Callback Functions through a Loop in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related