WebReference.com - Part 1 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (4/6) | WebReference

WebReference.com - Part 1 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (4/6)

To page 1To page 2To page 3current pageTo page 5To page 6
[previous] [next]

Professional JavaScript 2nd Edition

Main Run Loop

Each time the ticker cycles, the main run loop invokes this function:

// --- The basic rotate function
      function runTheTicker()
         if(theStoryState == 1)
         if(theCurrentLength != theStorySummary.length)

The StoryState indicates whether we need to set up the next story. That involves fetching its headline text and determining the URL value and headline length.

If we are not already at the end of the headline (currentLength = headline length), then we draw the story, taking into account that we must append one more character than we did last time. If we are at the end of a headline, we must close out the story. This draws the headline text without the golf ball effect.

Data import

Setting up the story involves the least portable part of this application. Due to the constraints imposed on the ticker design, the textual data must be embedded within the same file as the ticker script so it is loaded as a single document. The workflow processes that involve a team of journalists entering headline data via a client on a database, and that data being published as a data feed imposed this constraint. The format and presentation of that data feed was immutable, because it is used to feed several other processes, but we were able to pass it through a filter and convert it into something we could use. Unfortunately, that something was not JavaScript, but HTML structured with DIV blocks. That fragment of HTML is then inserted into a template ticker file with a server-side include. This is illustrated in the following diagram, which shows the critical parts of the process that are used by the ticker:

Ticker Data Workflow Diagram

The story array is traversed one item at a time and having obtained the story text, we construct the HTML to be placed inside the DIV block containing the anchor which the user will click on to go to the story. We use the innerHTML property to change the content of the anchor object. Each cycle round the loop, we construct a longer text until the entire string is inserted. At that time, we wait for a few seconds before indexing to the next story. The story is indexed with the global variable called theCurrentStory and the ticker text is sub-stringed with the global variable called theCurrentLength.

We'll skip the details of that traversal and extraction for a little while, because there are several alternative ways to accomplish it and we'll review them all in due course shortly. We'll also not go into great detail on the sub-string extraction and ticker drawing because we'll also cover that when we come to build our new ticker later on. That part of the ticker functionality at least should be fine. The portability issues are really all to do with extracting the story data from its container.

On the whole, this functionality is not very complex and is based on time-outs, as you might expect. The large string full of non-breaking spaces is necessary to fill the IFRAME. There may be a more optimal way to build that string with a for() loop, but all of the techniques for iteratively concatenating a single   entity would in fact cause a memory leak due to the fresh instantiation of a string to contain the concatenation on each loop. Perhaps the non-breaking spaces could have been put into the HTML portion of the page and extracted, but there didn't seem to be any benefit and there was certainly no space saving there either.

The key to this is the setTimeout() method, which is a very useful facility. A similar and related method can be used to call a function periodically, which is the setInterval() method. That method would not be appropriate here, because we want to change the duration of the timeout when we have completed the drawing of a story.

There are two ways we call setTimeout() to invoke the next loop. The first, is when we are still intending to tick out some more text. In the drawStory function, we call setTimeout() like this:

setTimeout("runTheTicker()", theCharacterTimeout);

The other case is when we close out a story to remove the golf ball. It's very similar, but uses a different global variable to yield the longer timeout value:

setTimeout("runTheTicker()", theStoryTimeout);

To page 1To page 2To page 3current pageTo page 5To page 6
[previous] [next]

Created: November 5, 2001
Revised: November 5, 2001

URL: http://webreference.com/programming/javascript/professional/chap21/1/4.html