• Choose a category
• All
• Classic-Fiction

By Root 4068 0

can click a button to see the next one instead of having to wait for the timeout to execute. The pause feature allows us to have more time to read a message that is interesting or long. Since we have used global variables for our timers, pause, and the currentMessage counter, we are able to affect the current state of the RSS reader very easily. Listing 13.16 shows the code that lets the user flip through the feed. Listing 13.16 JavaScript function to pause and skip the RSS reader feeds function MoveFeed (xOption){ b

Create function MoveFeed()

if(xOption == 0){ c

Check for pause/resume action

if(!bPaused){

bPaused = true;

if(timerSwitch)

d Pause the reader

clearTimeout(timerSwitch);

document.getElementById("btnPause").value =

"RESUME";

}

Licensed to jonathan zheng

532

CHAPTER 13

Building stand-alone applications with Ajax

else{

bPaused = false; e Resume the setTimeout("ChangeView()",300); reader

document.getElementById("btnPause").value =

"PAUSE";

}

}

else{

if(timerSwitch)

clearTimeout(timerSwitch);

if(xOption == -1)currentMessage += -2;

f Change

if(currentMessage < 0)

current

currentMessage = arrayMessage.length

message

+ currentMessage;

ChangeView();

}

}

By creating a function, MoveFeed()b and allowing it to accept a single parameter, we can handle all three situations; pause, skip forward, and skip backward. We can use an integer to differentiate between the different actions. To pause the reader, we pass in a 0. To skip forward, we use 1, and to skip backward we use –1. The first functionality we check for is the pause. We verify c that the passedin parameter is a 0. The pause button has two behaviors. The first is to enter the pause mode, which stops the transitions from executing. The second is resume, which allows for the slideshow to restart the transitions.

If the feed is not paused d, then we need to set our bPaused variable to true and check to see if our timer timerSwitch is running. If the timer is running, we need to cancel it by using the clearTimeout method. We change the button’s text to display the string “RESUME”. If the button is clicked to resume the feed, we do the opposite of pausing the feed e. We set the bPaused variable to false; we call our function ChangeView() with a slight pause in time, and we change the text of our button value back to “PAUSE”.

The pause behavior is now complete.

We have to create our skipping and backtracking functionality f. Since we are changing messages, we should remove the timer to avoid problems with skipping multiple messages. After we remove the timeout, we need to see if the action was

–1. If we are moving backward, we need to subtract 2 from the currentMessage variable. This is because the variable, currentMessage, is actually holding the value of the next message since it already has been incremented. By subtracting 1

from the variable, we stay on the same message. Since we are already have the Licensed to jonathan zheng

Additional functionality

533

next message variable stored in currentMessage, we do not have to do anything for the forward button.

We have to be sure that our number is not less than 0. If it is, we need to set our variable to the last message in our array. After we have changed the currentMessage, we can call our ChangeView() function to load our message. All we have to do is add the event handlers to the buttons (listing 13.17) so we can execute the function, MoveFeed().

Listing 13.17 onclick event handlers for button actions

value="

value=" PAUSE " onclick="MoveFeed(0)">

value="NEXT>" onclick="MoveFeed(1)">

To initialize the function, we add onclick handlers to our buttons. The onclick handlers call our function MoveFeed(), which passes the integers of –1 to skip backwards, 0 to pause the reader, and 1 to skip forward a message. By saving the document and opening our browser to this page, we can test the last of the functionality.

Now that we have the ability to skip messages, we can advance to the messages in the middle