#Kamehameha — the way you perform infinite loading

What is kamehameha?

Kamehameha is a kind of energy attack in the Dragon Ball series, and is Goku's signature technique.

How it goes with infinite loading

Let's simplify kamehameha and compare it with infinite loading:

states	action	kamehameha	infinite loading
ready		watch on certain enemy	watch on scrolling event
triggering		make a right pose	scroll the page to bottom
locked	...	can't be interrupted until finish the action	can't issue next request until finish current request
holding		collect energy	request data through ajax
emitting		booom!!!	rendering the results
resting		take a rest	delay a short period (to avoid request burst)
unlocked	...	go back to ready state	go back to ready state

How it works

This toy class defines an action flow of infinite loading by applying the kamehameha metaphor. It Helps user to focus on the business logic: event lisening, loading and rendering.

1. Create a GoKu. (GoKu is the character who can perform kamehameha with great power. "Kamehameha" is hard to spell. "Goku" should be more human-friendly.)

   var options = {
   	watch: function (next) {}
   	,shouldTrigger: function (event) {}
   	,onHold: function (next) {}
   	,onEmit: function (next) {}
   	,restingSeconds: <number>
   }
   var goku = new Goku(options);

2. Decide a watching target (options.watch). By default, he watches on window scroll event

3. Decide a triggering condition (options.shouldTrigger). By default, he triggers the action while page reaches bottom

   // trigger it once the distance to bottom is less than 100px
   shouldTrigger: function (event) {
       var heightViewport = $(window).height();
       var distanceFromViewportTopToPageBottom
               = $(document).height() - $(document).scrollTop();
       return (distanceFromViewportTopToPageBottom - heightViewport) < 100;
   }

4. Decide a callback to perform ajax requesting (options.onHold).

   // load 10 images from http://lorempixel.com/
   onHold: function(counter, next) {
       // ...
       // (new Image()).src = 'http://lorempixel.com/...';
       // ...
       next();
   }

5. Decide a callback to perform data rendering (options.onEmit).

   // render each loaded image
   onHold: function(counter, next) {
       // ...
       // $canvas.append(imageObject);
       // ...
       next();
   }

6. Decide how long to take a rest (options.restingSeconds). By default, it's one second.

7. Ask Goku to study what you teach and start to work

   goku.study();

Kamehameha in action