Javascript has so many global methods and properties that can be accessed in any part of the JS code. <code>setTimeout</code> and <code>setInterval</code> are two of the most essential JS methods.
<code>setTimeout</code> and <code>setInterval</code> are attached to the <code>window</code> object, they can be accessed prefixing with <code>window</code> object like <code>window.setTimeout()</code> and <code>window.setInterval()</code> or more often without the prefix.
<blockquote>
Global methods and properties need not be prefixed with window object and only if in cases you want to make sure that you are in browser environment and want to access global method or property, then prefix with <code>window</code> object.
</blockquote>
The way Javascript setTimeout and setInterval work are very similar. These are used to work with the timing or scheduling of functions.&nbsp;
<h2 style="text-align: center;">Javascript setTimeout</h2>
The setTimeout Javascript method sets a timer and executes a function passed to it once the timer expires.
Basically, the <code>setTimeout</code> method takes a function or the function reference as the first argument, followed by the optional arguments, delay, and the arguments to the function. Whenever the delay gets expired, the function gets executed or called.
<pre class="language-javascript"><code>setTimeout(function() {}, delay, arg1, arg2, ...);</code></pre>
Let's see it by a simple example.
<pre class="language-javascript"><code>setTimeout(() =&gt; {
 console.log('Hi');
}, 2000); 
// After 2 seconds logs:
// Hi</code></pre>
In the above example, after 2 seconds text gets logged in the console. The delay argument in the setTimeout method should be in milliseconds. If there's no delay given, 0ms will be the default delay.
<pre class="language-javascript"><code>const getData = (type = 'json') =&gt; {
 console.log('Getting data of type ' + type);
}
setTimeout(getData, 5000, 'markdown');
// After 5 seconds logs:
// Getting data of type markdown
----
setTimeout(getData);
// Logs immediately:
// Getting data of type json</code></pre>
In the above code snippet, we can see that the third argument in the setTimeout is passed to the <code>getData</code> function. All arguments other than the first two gets passed to the function, in this case, it is <code>getData</code>.&nbsp;
If in case if we want to stop the function from being executed before the timer expires, we can do that by using the <code>clearTimeout</code> global method of Javascript.
Every setTimeout method returns a unique timer ID using which we can clear that scheduled timer.
<pre class="language-javascript"><code>const logger = () =&gt; {
 console.log('Logging details');
}
const timerId = setTimeout(logger, 5000);

// If called before the timer expires, logger function won't be executed
clearTimeout(timerId);</code></pre>
In the above code snippet, we can see the <code>clearTimeout</code> being called before the timer expires as a result setTimeout won't execute the <code>logger</code> function.&nbsp;
<code>clearTimeout</code> can be called with the timer ID, inside any function based on different conditions to stop <code>setTimeout</code> executing the function.&nbsp;
<h3>Points to note for setTimeout:</h3>
<ol>
<li><code>setTimeout</code> is an asynchronous function which means the code that comes after it won't wait for it to complete.</li>
<li>The first argument of <code>setTimeout</code> takes a function reference which it calls once the timer expires, but often people call the function instead of passing the reference, as a result, whatever is returned from the function is executed by the <code>setTimeout</code>
<pre class="language-javascript"><code>const greet = function() { console.log('Hi')};

setTimeout(greet(), 5000); // greet gets executed without delay, it returns undefined as first argument to setTimeout
setTimeout(greet, 5000); // greet gets executed after 5 seconds
</code></pre>
</li>
<li>The <code>this</code> keyword will not behave as expected inside <code>setTimeout</code>. In such situations, you can use arrow functions as they bind <code>this</code> to the function scope, they are created in.
<pre class="language-javascript"><code>const person = {
 name: 'John',
 greetFunc: function () {
 setTimeout(function () {
 console.log(`Hi, ${this.name}`);
 }, 2000);
 },
 greetArrow: function () {
 setTimeout(() =&gt; console.log(`Hi, ${this.name}`), 2000);
 },
};

person.greetFunc(); // Hi, undefined
person.greetArrow(); // Hi, John</code></pre>
</li>
<li><code>setTimeout</code> with 0ms will not be executed immediately as it looks. It is executed after all the script is run, because it's an asynchronous function that is sent to the event loop before getting to the call stack.
<pre class="language-javascript"><code>console.log('First statement');
setTimeout(() =&gt; console.log('Second statement'), 0); // delay can be omitted it's the default value
console.log('Third statement');

// Log result(observe the order):
// First statement
// Third statement
// Second statement</code></pre>
</li>
</ol>
Now let's get into the setInterval of Javascript.
<h2 style="text-align: center;">Javascript setInterval</h2>
The setInterval Javascript method calls a function passed to it at every interval of time until unless it is stopped.
So it is similar to the <code>setTimeout</code>, but instead of calling the function once it keeps calling it at regular intervals until it gets stopped.
The <code>seteInterval</code> method takes a function or a function reference as the first argument, followed by the optional arguments, delay(time interval), and the arguments to the function. The function gets executed or called, with a fixed time delay between each call.
<pre class="language-javascript"><code>setInterval(function() {}, delay, arg1, arg2, ...);</code></pre>
Let's see it with a simple example
<pre class="language-javascript"><code>setInterval(() =&gt; {
 console.log('Hi');
}, 2000); 
// After every 2 seconds it logs:
// Hi
// Hi
// ....</code></pre>
In most situations, it is important to stop calling the functions passed to the setInterval.
Similar to the <code>setTimeout</code>, <code>setInterval</code> returns an interval ID that uniquely identifies the interval(nothing but the <code>setInterval</code> instance).
Similar to <code>clearTimeout</code>, setInterval has <code>clearInterval</code>, calling it with the interval ID will clear or stop the setInterval instance from further calling the passed function.
<pre class="language-javascript"><code>const intervalId = setInterval(() =&gt; {
 console.log('Hi');
}, 2000);

setTimeout(() =&gt; clearInterval(intervalId), 5000);
// Hi
// Hi
// By 5th second clearInterval stops the setInterval instance</code></pre>
Just like in <code>setTimeout</code> we can pass the arguments to the function we want to call in setInterval after the delay argument.
<pre class="language-javascript"><code>const greet = (name) =&gt; {
 console.log(`Hi, ${name}`);
}
const intervalId = setInterval(greet, 2000, 'John');
setTimeout(() =&gt; clearInterval(intervalId), 5000);
// Hi, John
// Hi, John</code></pre>
So all the points that we discussed in the <code>setTimeout</code> section will hold true for the <code>setInterval</code>.&nbsp;
<code>setTimeout</code> is also asynchronous, function reference has to be passed as the first argument instead of calling it and <code>this</code> keyword will not behave as expected similar to the <code>setTimeout</code>, so prefer using arrow functions.&nbsp;
So that's all you need to know about <code>setInterval</code> method in Javascript.
Let's see how we can create setInterval using setTimeout.
<h2 style="text-align: center;">Nested setTimeout</h2>
We can use <code>setTimeout</code> to create a <code>setInterval</code> like method with variable delays. Nested &nbsp;<code>setTimeout</code> in fact helps to set precise delays between function executions than <code>setInterval</code>.&nbsp;
Let's see an example to create a <code>setInterval</code> like method using nested setTimeouts.
<pre class="language-javascript"><code>// const timer = setInterval(() =&gt; console.log('Hi'), 100); // Hi, Hi,...

//setInterval equivalent using nested setTimeout

let delay = 100;
let timerId = setTimeout(function greet() {
 console.log('Hi');
 // delay can be varied as per our requirements
 // if(condition) delay = ...;
 timerId = setTimeout(greet, delay);
}, delay);

// Logs after every 100 milliseconds
// Hi
// Hi
// ...</code></pre>
If you try to experiment using setInterval and nested setTimeout, setInterval delays are not precise because it consumes some of the interval time in function execution and if the function execution takes more time than the delay, then you won't even see time delays between each function execution.
So for precise intervals between each function call, you should prefer using nested <code>setTimeout</code> over <code>setInterval</code>.
You should also keep in mind that, <code>setTimeout</code> and <code>setTimeout</code> do not guarantee exact time delays. The delays depend on CPU overload, background running processes in the browser window, etc.&nbsp;
And that is all about Javascript setTimeout and setInterval.&nbsp;

Javascript setTimeout and setInterval are the two global methods for timing or scheduling function calls. Here is all you need to know about these methods.

Posts tagged with SetTimeout

Javascript setTimeout and setInterval all you need to know