desktop developers,
wonderful things happen!
AJAX In Action (3): Slide Show With Asynchronous Calls
I
N
T
R
O
his article describes the evolution of the Photo Album Application's Next button.
The slide show has been implemented as an imitation of periodic clicks on the Next button.
Historical Review
In the early computer age programs executed procedures one after the other. The asynchronous approach enables us to trigger new procedures while old ones are still running. In many cases we don't have to care about parallel runs of procedures because the individual actions finish so quickly that the sequential processing is not noticeable. However, we must arrange parallel processing when a process takes long or when we want to time and delay processes. In desktop applications it is obvious that calculations continue, data streams flow, and clocks are ticking while we do something else on the computer. Web developers became envy of desktop developers, and when we get envy, wonderful things happen!
Many web applications don't work with sequential processing. In some cases the user experiences only annoying effects, like temporary space holders instead of pictures. In other cases the web application crashes because it expects downloaded elements which are not there yet. For the latter I will show an example in one of the next articles, where I discuss the handling of XML data that carry the names and descriptions of the pictures.
Buttons Of The Photo Album Application
Here is a screen shot of BTDT:
Four buttons are visible: the thumbnail view, the previous, the next, and the slide show buttons. The buttons are INPUT tags:
onclick="thumbNails(GetPresentState(1))" />
<input type="button" title="Previous" id="btPrev"
onclick="Prev()" />
<input type="button" title="Next" id="btNext"
onclick="Next();" />
<input type="button" title="Start Slide Show" id="btPlaySlide"
onclick="SlideShow()" />
The title attribute provides a nice effect. Its value pops up when the mouse goes over the button. In this article we discuss two functions that are called by clicking on the previous and on the next buttons:
if (g_Play) SlideShow(STOP);
var albumNo = GetPresentState(1);
var picNo = GetPresentState(2);
if (picNo==0){ //thumbnail view of next album
albumNo--;
thumbNails(albumNo)
}
else {
picNo--;
setImage(albumNo,picNo);
}
}//end function Prev
function Next(timeLeft) {//Called with arg programmatically
if (isNull(timeLeft)) SlideShow(STOP)
else timeLeft--;
if (timeLeft < 0) { //set next image immediately
var albumNo = GetPresentState(1);
var picNo = GetPresentState(2);
if (picNo==0){ //thumbnail view of next album
albumNo++;
thumbNails(albumNo)
}
else {//next single slide
picNo++;
if (picNo>=arrMenus[albumNo].length) picNo=1;
setImage(albumNo,picNo);
timeLeft = g_delayTime;
if (g_Play) Next(timeLeft);
}
}
else {//after 1 sec(=10000 msec) call Next again
tout = setTimeout('Next(timeLeft--)', 1000);
}
}//end function Next
The first line of Prev() (and of Next()) is obvious. It stops the slide show. The second and third lines read the state variables, discussed in the previous article. The following branching shows the dual task of the previous button: When we are in thumbnail view, the click brings up the thumbnail view of the previous album. When we are in single picture view, the click calls the previous picture of the same album.
Function Next could have been similar to function Prev with the minor difference that albumNo++ and picNo++ increment operations would replace the albumNo-- and picNo-- decrement operations. Next() without a parameter basically does the same as Prev(), in opposit direction. However, the slide show is implemented the way that function Next is called with a timeLeft parameter and with a global Boolean variable g_Play that is set to true. It recursively calls itself until the user hits a button.
How The Slide Show Works
The key statement of the slide show is the last line of function Next. The function setTimeout() is one of the the most important functions in asynchronous Javascript programming. Its first parameter tells which function should be called later, and the second parameter gives the definition of 'later' in milliseconds. In our example Next calls itself recursively, with decrementing parameter. When the parameter becomes negative, Next behaves as if it was called by a regular click. If nothing happens in the meantime, g_Play stays true. Right after setting the new image, it also resets the waiting time, and the process starts again.
In the last article of this series, AJAX In Action (4): Preloading Images I show you another trick that makes the photo album application fast. Trust me, it won't be just another presentation of the usual preloading technique.