Home arrow JavaScript arrow Page 3 - Getting Attention with Interactive Effects

Ajaxian Timers - JavaScript

If you're looking for a quick way to delight your visitors with the addition of Ajax to your site, look no further. This article, the fourth of a four-part series, will show you how to do color fades, timers, and more. It is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

TABLE OF CONTENTS:
  1. Getting Attention with Interactive Effects
  2. Color Fades for Success or Failure
  3. Ajaxian Timers
  4. Creating a Flashing Notice
  5. Creating a Flashing Notice concluded
By: O'Reilly Media
Rating: starstarstarstarstar / 9
October 11, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Prototype implements a method called bind, which is attached to the Function object through the JavaScript prototype property. A quick reminder: the prototype property is a way of attaching a new method or property to the basic implementation of an object in such a way that all instances of that object "inherit" the extension equally. In the case of Prototype's bind, this method returns a function that in turn calls the Function object's apply method, passing in a string of the outer function's arguments. The original code looks like the following:

  Function.prototype.bind = function() {
    var __method = this, args = $A(arguments), object =
args.shift();
    return function() {
      return __method.apply(object, args.concat($A(arguments)));
    }
  }

The JavaScript apply method lets us apply one object's method within the context of another object's method. It takes the external object's context, represented as an object (passed as the first parameter in the argument list), and passes it as the first parameter. The second parameter is an argument list, derived using Prototype's $A method, which returns an array of iterative objects (necessary when modifying the parameters of built-in objects, as Prototype does with objects like Function and Array).

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:

  function aaBindEventListener(obj, method) {
    return function(event) { method.call(obj, event ||
window.event)};
  }

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>New Timers</title>

<style type="text/css">
#item { font-size: 72px; margin: 70px auto;
        width: 100px;}
</style>

<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript">
//<![CDATA[

aaManageEvent(window,"load", function() {
   var theCounter = new Counter('item',10,0);
   theCounter.countDown();
});

function Counter(id,start,finish) {
   this.count = this.start = start;
   this.finish = finish;
   this.id = id;
   this.countDown = function() {
    
if (this.count == this.finish) {
        this.countDown=null;
       
return;
     
}
    
document.getElementById(this.id).innerHTML=this.count--;
    
setTimeout(aaBindEventListener(this,this.countDown),1000);
   };

}
//]]>
</script>
</head>
<body>
<div id="item">
10
</div>
</script>
</body>
</html>

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.



 
 
>>> More JavaScript Articles          >>> More By O'Reilly Media
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: