1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript can be executed in time-intervals. This is called timing events. |
With JavaScript, it is possible to execute some code at specified time-intervals. This is called timing events.
It's very easy to time events in JavaScript. The two key methods that are used are:
Note: The setInterval() and setTimeout() are both methods of the HTML DOM Window object.
The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.
The window.setInterval() method can be written without the window prefix.
The first parameter of setInterval() should be a function.
The second parameter indicates the length of the time-intervals between each execution.
Note: There are 1000 milliseconds in one second.
Alert "hello" every 3 seconds:
The example show you how the setInterval() method works, but it is not very likely that you want to alert a message every 3 seconds.
Below is an example that will display the current time. The setInterval() method is used to execute the function once every 1 second, just like a digital watch.
Display the current time:
The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.
The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
Then you will be able to stop the execution by calling the clearInterval() method.
Same example as above, but we have added a "Stop time" button:
The window.setTimeout() method can be written without the window prefix.
The setTimeout() method will wait the specified number of milliseconds, and then execute the specified function.
The first parameter of setTimeout() should be a function.
The second parameter indicates how many milliseconds, from now, you want to execute the first parameter.
Click a button. Wait 3 seconds. The page will alert "Hello":
The clearTimeout() method is used to stop the execution of the function specified in the setTimeout() method.
The window.clearTimeout() method can be written without the window prefix.
To be able to use the clearTimeout() method, you must use a global variable when creating the timeout method:
Then, if the function has not already been executed, you will be able to stop the execution by calling the clearTimeout() method.
Same example as above, but with an added "Stop" button:
A clock created with a timing event