javascript callback issue

Question

I don't really understand how callbacks work. Here is the code (line 49-53 is where the problem is, I want n to be equal to the number of images in my directory): http://pastebin.com/HbALuzGE. I expect onerror callback to happen immediately (as play() calls change() which uses my n var), but that's not the case, yet I don't know how to correct it.

Maybe your problem is similar to http://stackoverflow.com/questions/9809015/image-onerror-event-never-fires-but-image-isnt-valid-data-need-a-work-around — Barmar, Aug 07 '12 at 06:24
I dont understand your issue.but I think say that After a trigger events will cover before a executing events. — Myd, Aug 07 '12 at 07:56

Endre Simo · Answer 1 · 2012-08-07T13:56:00.240

Think of callbacks as a method or way to run functions asynchronously. Normally implementing a callback consist in passing a function as an argument or parameter to an existing function. If specified, this second function will be invoked once as the condition imposed has been met. This is useful in case we want to make sure that the execution context of the first function has been executed and only then pass over to the second function. This way we will make sure, that the second function won't be accessed only when the first function has been fully executed.

The best examples using a callbacks are the server requests, and time animations, where it's absolutely vital to have a certainty that the methods executed inside the functions have been completely satisfied. Here is a very simple example of using callbacks:

function start(num1, num2, callback) {
    console.log ("Number 1 is: " + num1 + " and Number 2 is : " + num2);
    sum = num1 + num2;
    if (callback) {
        callback(sum);
    }
}

start(8, 2, function(sum) { console.log ("Sum is: " + sum); });

I think you should simplify your code. Maybe i'm wrong, but i think the problem is in the last function when you are defining an image counter i, but when you are passing to onload function you are creating another execution context / closure.

EDIT

Analyzing your code i came to the following solution. You can loop through the images within your image assets with something like this:

var images = [...];

for (var i = 0; i< images.length; i++) {
    var img[i] = new Image();
    img[i].onload = (function(img) {    
        return function () {
          // do something here
        }

        img[i].src = images[i];
    })(i);          
}

...or another way:

function loadImages(images, callback) {
    var loadedImages = 0;

    for(var i=0; i< images.length; i++) {
      images[i] = new Image();
      images[i].onload = function() {
        if(++loadedImages >= images.length) {
          callback(images);
        }
      };
      images[i].src = images[i];
    }
  }

  window.onload = function(images) {

    var sources = [...]

    loadImages(sources, function(images) {
      // do something
    });
  };

In this case the returning function is important, because this way you will delegate the execution to another function. Hope this help, but i have to admin it was not quite clear what you are trying to do.

javascript callback issue

1 Answers1