Section 7: Using Timeout And The Status Bar TogetherIf we say:
<script>
setTimeout("window.status = '7 seconds';",7000);
</script>
Then within seven seconds, the phrase 7 seconds will appear on the status bar. Follow this link to see this in action. Better still, we could write a function to set the status bar for us, and use setTimeout to run that function at the appropriate time.
<script>
function ChangeStatus(x) {
window.status = x + " seconds" ;
}
setTimeout("ChangeStatus(3);",3000);
setTimeout("ChangeStatus(10);",10000);
setTimeout("ChangeStatus(7);",7000);
</script>
One advantage of this is that quite complicated things can be done to the status bar using a single command to call the function. Follow this link to see this example in action. Here, the status bar changes three times: at 3 seconds, then at 7 seconds, and finally at 10 seconds. But what if we want the status bar to change continually? It is not practical to put in an infinite number of setTimeout commands:
<script>
function ChangeStatus(x) {
window.status = x + " seconds" ;
}
setTimeout("ChangeStatus(1);",1000);
setTimeout("ChangeStatus(2);",2000);
setTimeout("ChangeStatus(3);",3000);
setTimeout("ChangeStatus(4);",4000);
:
:
setTimeout("ChangeStatus(17724);",17724000);
setTimeout("ChangeStatus(17725);",17725000);
setTimeout("ChangeStatus(17726);",17726000);
:
:
</script>
This would take far too long to type! And far too long to load into the browser! A much better solution is to use the ChangeStatus (or whatever) function to not only change the status, but also to start a new timer running at the same time. Consider carefully the following example:
<script>
function TimeUntilY2K() {
various commands to calculate how many seconds until the year 2000;
}
function SetStatus(x) {
window.status = "Only " + x + " seconds until the year 2000!!!" ; // This sets the status
x = x - 1;
command = "SetStatus(" + x + ");" ; // This prepares to set the status again with a
setTimeout(command,1000) ; // new value of x in one second's time.
}
x = TimeUntilY2K(); // Find out how long until the year 2000
SetStatus(x); // Set the status bar to show that number.
</script>
Here we have a function called TimeUntilY2K() which calculates the number of seconds until 0:00:00 on the 1st January 2000. We won't concern ourselves with the details of this function here. The next function is called SetStatus, and it takes one argument, a number x. It first sets the status bar, to warn the user how much time until Y2K, using the command window.status = "Only " + x + "seconds until the year 2000!!!" ; The number x is then reduced by one, and then a string called command is produced. This string is supposed to be the command to call SetStatus with the new value of x. For example, suppose you gave the command SetStatus(3210) Then, inside the function SetStatus, the variable x starts off with the value "3210". The window.status is changed to read "Only 3210 seconds until the year 2000!!!". Then, x is reduced by 1, to become "3209", and the string command then becomes "SetStatus(3209)". Finally, this string command is given to the setTimeout command, via setTimeout(command,1000) so that the new SetStatus command is given one second after the first one finishes. In this way, the status bar will change every second, showing a smaller and smaller number of seconds each time it changes. follow this link to see this example in action. Actually, this is not the best way to put a millennium countdown clock on the status bar. It will lose about 3 minutes every hour, and reach 0 on about the 14th of January (if you left your computer on that long!) A more common way people use window.status together with setTimeout is to have a scrolling status bar. Consider the function below:
function Scroll(s) { // s is the string to scroll
window.status = s ; // first thing, change the status bar to s
head = s.slice(0,1); // this will "slice" off the first character of s
tail = s.slice(1,s.length); // this will slice off the rest of the characters of s
s = tail + head; // this takes the head, and puts it at the end of the tail
command = "Scroll( '" + s + "' );" ; // this sets up the command ready for setTimeout
setTimeout(command,50) ; // This prepares to run "Scroll" again in 0.05 seconds.
}
This function takes one argument, a string s. The first thing it does is to set the status bar to s, using the command window.status = s. Then, it does some strange operations on s, before setting a new Timeout. Let's look more closely at these operations. The first command given is head = s.slice(0,1); This will in fact, slice off all the characters after the 0'th, until the 1st. In other words, it just slices off just the first character of s. It then copies that first character into the variable head. Note that s is not changed during this process. The next command given is very similar: tail = s.slice(1,s.length); this will slice off all characters of s after the 1st, and until the character number s.length (the length of s - in other words, all of s except the first character. This will then be stored in tail. Again, s is not affected by this process. For example, if s is the string "Welcome to Javascript!! ", then after these two commands head would contain just the letter "W", and tail would contain the string "elcome to Javascript!! ". Next, the command s = tail + head; Will join these two strings back together, but in the wrong order! In other words, s would become the string "elcome to Javascript!! W". The command command = "Scroll( '" + s + "' );" ; will then join the string "Scroll( '" to the new s, and then to the string "' );", yielding "Scroll( 'elcome to Javascript!! W' );". This Javascript command is then given to setTimeout, ready to be done 0.05 seconds later. When the timer runs out, the whole process is repeated. Roughly 20 times per second! The only visible change to the screen will be that the status bar changes each time. This is what the user will see: Command: Scroll("Welcome to Javascript!! "); -> Status bar: Welcome to Javascript!! And so on and on... the effect of this will be that the words appear to scroll smoothly across the status bar! In Example 7d, the following commands are used to start the message going: message1 = "Welcome to the Web Page Design Workshop at SIT. "; message2 = "I hope you are all learning a lot! "; message3 = "Soon you will all have really snazzy web pages!!!! "; message = message1 + message2 + message3 ; Scroll(message); The command message = message1 + message2 + message3 ; creates a very long string (message) by joining together the three shorter ones. This longer message is then scrolled smoothly across the bottom of the screen. Follow this link to see this example in action. |