If you want to skip right to the demo with reading about continuations go here .

Recently the concept of continuations has started to become more popular due to frameworks/languages such as Rife, Ruby, Cocoon/Rhino, Narrative JS, and jwacs and for very good reason. They can make programming asynchronous tasks much easier. Essentially, a continuation is saving the state of the call stack. This may sound complicated and not useful, but it has some big benefits, especially in the arena of web applications. There are many actions in a web application that must wait for something to happen and then resume execution. Invariably, we resume execution by passing around a callback. This is the basic pattern for most Ajax usages. We provide a callback handler to the Ajax request, so that when the call is finished, we can finish whatever we need to do. Consequently, Ajax has been one of the main motivations for the development of a couple continuation packages, including Narrative JavaScript , and jwacs . These packages do compilation of JavaScript to add continuation support and then you can make Ajax calls with a simple function like:

var result = fetch(url)

What happens when this asynchronous request is finished? Does it make a call to your callback handler? No, it simply executes the next line. How simple and elegant! It is in fact possible to do this type of call with the XMLHttpRequest without continuations, by doing a synchronous call. However synchronous calls lock up the browser and provide a terrible user experience, and should be avoided.

While Ajax seems to be the most popular usage JS continuations, there are three major areas where continuations can be highly beneficial in JS on a browser:

• Ajax
• Animation
• Sequential user interaction

I want to discuss animations now. Animations in JavaScript generally use a simple pattern. Update the DOM/view, wait for a certain length of time, update, wait, update, wait and so on. If you are doing motion, the update is usually the repositioning of a DOM element, if you are doing a fade, the update is the change in the style/color of a DOM element, but all animations must have a wait cycle.  It is necessary to do this because you must wait in order for a browser to have a chance to render the update and usually want your animation to be the same speed on machines that are faster and slower. However, in order to a wait in JavaScript you must do a setTimeout operation and provide a callback. I am sure that countless programmers have done a google search trying to find the (non-existent) sleep function in JavaScript. Why? Because it is makes things much more difficult to have arrange all of our animations with setTimeouts and callbacks. If we want take certain parts of an animation and put them in a function and execute the functions sequentially, things get even more complicated, because we have to pass callbacks down into called functions. It can be quite a mess if you have a number of functions calling other functions. You just simply can't write your JavaScript sequentially the way that would make the most sense.

I am certainly aware that there are a good number JavaScript libraries that provide a lot of help with this situation. And for most animations, YAHOO, Dojo, Scriptaculous, Jquery, or whatever can provide a very nice simple solution for your animation. But as we all know, when we start wanting to do more customized solutions, it can become difficult to get a library to do what you want. They didn't necessarily foresee how you want your animation, and if you are dealing with sequences and so forth, you often end with another mess of callbacks, one of the very things that the library was supposed to save you from.

This is where continuations come to the rescue. With continuations, we can actually have the sought after sleep function! And this sleep function that does not lock up your brower or load the CPU (of course you can create a sleep simply loops until a certain time has passed, but that simply won't do the trick for animations). With complex animations this makes a profound difference. We can now write functions that do parts of an animation and when there done... they return! No messy callbacks, but simple linear code. Now lets look at the example .