Working with timers
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Working with timers
I have a function defined called simpleMessage. I'm going to add just a call to setTimeout. We can just call setTimeout directly the same way we could call alert or console.log. It's always available. All I need to give it is two things: the name of the function I want to call--in this case simpleMessage, comma--and the interval. Now, setTimeout is used in milliseconds, so if I wanted to say pop up five seconds later, I'll put in 5000.
Finish that statement. We can ignore anything that's below it. Right now, it's not being used yet. I am going to save that, and I'm going to refresh the page that I am on that's actually using this. Open that up, and then hopefully in about 5 seconds, we get the alert box. Yes, I agree, not very exciting, but it proves the point. Now, when I use setTimeout, it just happens once. It hits that line of code and says, "I am going to do this once and that's it." We also have a different one called setInterval.
setInterval takes exactly the same format, but it repeats it. In this case, setInterval will call the function called changeImage every five seconds. Now, what do I have going on here? Well, just to break it down, what I am doing is on line 10 I'm grabbing hold of an element of the page called mainImage, and if I look at the HTML here, all I have is that mainImage isn't a regular image tag in the main section of my document.
So I am grabbing hold of that, so I can change the source of it. On line 12 and 13 I am creating an array, using the shorthand format within the square brackets, and all I'm putting in it is six paths to images, and these are just some images I have locally in the _images folder that I have here. I've gone through and manually entered these. Now what I am going to do is rotate around them.
So I am creating my own little index here, which I will set at position 0, and then in my function called changeImage I'm going to reach into that image and set its source attribute to whatever the current contents of the array are at the current index. So the first time we call it it will say, "Well, my index is set to 0. I will grab the image that's called overlook. jpg, and just add that entry to the image tag." Then we add one to the imageIndex.
We check to see if the index is larger than the length of the array; it isn't. So I am done with the function. But setInterval is still ticking, and in five more seconds it's going to call changeImage again. We then grab the second element, we change the attribute, we increment the index, and we just keep going. So if I save this, go back over to my page, and hopefully, after about five seconds we change to one image, we wait a few more seconds, it will change to the next one, and as we watch, it would keep going and just start to loop around.
A very simple use, and all we're really doing here is the setInterval. But both setTimeout which is the single one and setInterval which is the repeating one have their mirror images, the ability to both clearTimeout and clearInterval. So just because we start something repeating, doesn't mean we always want to go on that way. The question is, how do we do it? Well, here's the interesting thing. When we call setInterval--I am just going to bring it up a little bit so I can see more to it-- this function actually returns a value, and I'm going to store it.
I didn't care before, but now I do. I'm going to create a new variable called intervalHandle. That's as good a name as any. It's just going to be a variable that connects me to a little bit of memory that says 'I understand what this interval is doing.' What I am then going to do is say, when somebody clicks on the image--so I'll use the myImage.onclick event = function(), just a small anonymous function-- I'm going to call, instead of setInterval, I am going to call clearInterval, passing in that interval handle, the variable that was returned from calling setInterval.