In this article, I will introduce setInterval () and setTimeout () functions of JavaScript and are call for execution when the usage.setTimeout () and setInterval () is generally used to deal with the delay and timing tasks.
The JavaScript library functions setTimeout and setInterval are which delayed seemingly parallel execution rather than the actual spawning of processes.You might like other article using setInterval here jQuery Shake Effect Explained
Whether you use setTimeout or setInterval, but when use the function name as a call handler can not take parameters.In many cases have to take parameters to set timeout or interval.
SetInterval
SetInterval very handy to use because it set the delay function in JavaScrpt.
Explanation:
The timing of implementation of the function call, in accordance with a specified period (in milliseconds), to call a function or evaluate an expression.
SetInterval is loaded from a specific interval of time to perform an expression changes automatically display using setInterval achieve a random number.
Also Read: Convert date from one format to another format using javascript
SetInterval function to be executed at time intervals (without “()”) and allows to define the function parameters called Interval. SetInterval has two ways to call.
- Direct call
SYNTAX:
1 2 3 | setInterval (function, interval); |
- Indirect Reference
SYNTAX
1 2 3 | setInterval (Object, "methodName", interval) |
To call a function or code strings to be executed.interval must. Periodic execution time or interval between calls code in milliseconds.
Code Explanation:
1 2 3 4 5 6 7 8 | <script type="text/javascript"> var time = 1000;//Interval (in milliseconds) var id = setInterval(function() { //Here is the function or expression will be call }, time); </script> |
As above code, the function setInterval will be called at the specified intervals, in this case, it will be called at every 1000 milliseconds. The second argument is the Interval to the passed to the function. To see the effect that after the function is called, the output window will see Interval called.
NOTE: setInterval () method will continue to call the function until the clearInterval () is called, or the window is closed.
SetTimeOut
SetTimeout very similar. setTimeout used to delay then perform an operation.
The settimeout () method is used to call the specified number of milliseconds after the function or evaluate an expression.
SYNTAX
1 2 3 | setTimeout (function, milliseconds) |
The function is required and it will be used after the call to execute JavaScript code. The second parameter is also required and value will be the number of milliseconds to wait before executing the code.
NOTE: setTimeout () code executed only once. If you want continuous call, use the setInterval ().
Code Explanation:
1 2 3 4 5 6 | var time = 1000;//Interval (in milliseconds) var id = setTimeout(function() { //Here is the function or expression will be call }, time); |
ClearInterval
ClearInterval is mainly for clearing the interval set by setInterval.
SYNTAX:
1 2 3 | clearInterval (id_of_setinterval) |
Parameter passed in clearInterval() function must be ID value returned by the setInterval() function.This value identifies cancel delay implementation of the code block.
To cancel setInterval (), function set the timing of the implementation of the operation.
Code Explanation:
1 2 3 4 5 | <Script type = "text / javascript"> clearInterval (id); // cancel the setInterval () function by setting the timing of the implementation of operations </ script> |
You want to prevent a sudden jump out of the window, you need to use clearTimeout () as the return value.
If you want to see the visual difference between SetTimeout and SetInterval, See the following Demo:
1 2 3 4 | <div id="setTimeout">TimeOut Area</div> <div id="setInterval">0</div> |
See the Pen BNQOMP by Bhumi (@creativedev) on CodePen.
Hope this post clear your query or clear the difference between SetTimeout and SetInterval.
Comments (2)