Main Page Content
Using setInterval() to Make a JavaScript Listener
Rated 3.53 (Ratings: 9) (Add your rating)
Log in to add a comment
(17 comments so far)
Tom Dell'Aringa
User since: May 20, 2002
Last login: July 10, 2007
Articles written: 1
Oftentimes when you are building something, you need some kind of function to "listen" for either an event or a condition. You need this to happen continously so you can act upon it when it does happen.
Quite often programmers attempt to use setTimeout() in these cases, which isn't what you want. What you need is the red-headed stepchild (apologies to redheads) of setTimeout(), setInterval().
setInterval() to somebody, they reply one of two ways:
- You mean
setTimeout()? or - Huh?
I'm not sure why this is - maybe too many "cut and paste" scripts out there with setTimeout() in them. Anyway, there is a vast gulf of difference between the two, and the gulf is very simple to understand.
setTimeout()allows you to DELAY the execution of an expression or evaluate a function.setInterval()allows you to EVALUATE an expression or a function at set INTERVALS (thus the name - neat eh?).
So, who cares about setTimeout(), we've all heard enough about that. Let's have a bash at an example.
The Need
Your mission, should you accept it: you have two text input boxes. When text is entered into both fields, you want to display a hidden div. You can't do this on the submission of the form, because the hidden div contains more input that has to be sent along with it. (Play along, it's just an example!)
What you need to know is when both fields have entries. (We won't worry about error checking, etc.) This is where our buddy setInterval() comes in.
Our Page Code:
<html> <body> <form id="form"> <input type="text" id="text1"> <input type="text" id="text2"> <div id="hidden" style="display: none;"><input type="text" id="text3"></div> <input type="submit" value="submit"> </form> </body> </html>
First, Our Function
First, we need a function to do what we want to happen when our condition is met. What it needs to do is display our hidden block:
function showHiddenDiv()
{
var textBox1 = document.getElementById("text1").value;
var textBox2 = document.getElementById("text2").value;
var ourDiv = document.getElementById("hidden").style;
if(textBox1 != "" && textBox2 != "")
{
ourDiv.display = "block";
return true;
}
return false;
}
We set up some local variables to point to our two text boxes and their values (what's in them) and our hidden div's style. Then we have our condition here - if both text boxes are not equal to empty (they must both be full) we change the display style to block, and it becomes part of the page flow.
If one of the text boxes is still empty, the 'else' condition fires and we return 'false.' You don't have to do this, but I understand its good technique to return some value from your functions, and apparently the strict warnings in some new browsers (if you have the feature turned on) will send you a warning if you don't.
Second, the Interval
Now, we need to set up our interval to periodically fire off our function to do the checking or "listening." The structure for the setInterval() method is:
var interval_name = setInterval([expression_or_function], [time_period]);
And if you use a function, it must be quoted and include the brackets. Now, you don't want to go nuts and check the thing every 10 milliseconds - consider that a Bad Thing(tm) and a performance hit. However, once per second would be fine, and once that second entry is made your hidden div should be showing.
Our Interval Method:
var ourInterval = setInterval("showHiddenDiv()", 1000);
That's it - that's all. Once the page is loaded, showHiddenDiv() will run every second until it's first condition is met, and the hidden div is shown. Great! But then what? How do you stop it? The beauty is, since you set your interval to a variable, that variable is now the id for your interval. All you need is to add the clearInterval() method to your function, with the variable name as its parameter. So your final function looks like this:
function showHiddenDiv()
{
var textBox1 = document.getElementById("text1").value;
var textBox2 = document.getElementById("text2").value;
var ourDiv = document.getElementById("hidden").style;
if(textBox1 != "" && textBox2 != "")
{
ourDiv.display = "block";
clearInterval(ourInterval);
}
else
{
return false;
}
}
Other Issues
Of course in this case, you might have to deal with issues such as, what if the user erased one input and so forth. But that's your job. If the user reloads the page, you're golden, because your script reloads too and your interval restarts.
So tap into the power of setInterval() and "listen" to your heart's content!
