How bind works with setTimeout is that the object's state is maintained with each call to setTimeout, including the value of the object's properties. Since the state is maintained, Ajax developers don't have to worry about passing function parameters with the timer or using a global variable.
This functionality will be necessary for other applications later in the book, so it is worthwhile to convert it into a function and add it to the addingajax.js library. It's not the same as Prototype's approach because this book's use differs, but it performs the same functionality of binding the object context to the method invoked as an event handler:
Example 4-12 is a rewrite of Example 4-11, using objects and the new aaBindEventListener. Instead of passing a function directly into the setTimeout function call, the aaBindEventListener method is invoked, which returns a function. Doing this preserves the state of the object, including the countdown amount, which is now a property of the object.
Example 4-12. Taking a closer look at an Ajaxian timer
The reason that the Counter object sets its countDown method to null at the end is based on a memory leak in IE 6.x when using a recursive or function closure technique (function within function). This has been fixed in IE 7, but Ajax developers need to account for IE 6.x until clients are no longer using this browser.
The use of Function.call in managing timers is an interesting technique, if a bit difficult to wrap your mind around at first. It is a better approach than setting global values hither and yon, as it makes it much simpler to maintain values between timer calls.
The next section applies the timer functionality to creating a flashing notice fade.