This technique is used to avoid having a lot of requests when callbacks run.

Let’s say you have some callback that you invoke after user action. For example to fetch new photo in photo gallery browser.

Gallery = Class.create({
  next: function() {
    // Do some stuff such as store photo id.
    this.callback();
  }

  callback: function() {
    // magic AJAX request code here that fetches info and puts it on screen.
  }
});

So user clicks on next button, callback gets invoked, everybody is fine.

But what if user clicks on next button several times rapidly? Or you introduce changing photos by mousewheel? You get a lot off callbacks (lets say 5) when really you need the last one. And nobody likes useless server load.

What shall we do? I’ll show you the code:

Gallery = Class.create({
  next: function() {
    // Do some stuff such as store photo id.
    setTimeout(this.generateCallback(), 100);
  }

  generateCallback: function() {
    var current = this.photoId;
    return function() {
      if (current == this.photoId) this.callback();
    }.bind(this);
  },

  callback: function() {
    // magic AJAX request code here that fetches info and puts it on screen.
  }
});

So how does this work? Each time you select next image, a generateCallback() is invoked. It stores current photo id in current – a local variable only available to that method invocation. It also returns an anonymous function that is bound to Gallery instance (so this in that function means same as this in next()).

So when user rapidly clicks on next 5 times, 5 functions are generated and they’re going to be invoked after 100ms each. But why don’t they run all?

It’s because of if (current == this.photoId). Because current is local it stores the value of photoId when generator function was invoked. And because that function is bound to this this.photoId is the id set by last next() invocation – the value that we need fetching.

I hope it was clear (thou I think it was not ). Inspired by A JavaScript Module Pattern.

BTW: some oil into Prototype/jQuery wars – can you do such things with jQuery?