Using setInterval and setTimeout in JavaScript

There are setTimeout and setInterval function on the front-end side of a website that allows you to perform an operation after a certain period of time. setTimeout executes only once, setInterval executes continous. All web browsers support these two functions. In this article I will try to give you some examples of these two functions.

setTimeout

It is a JavaScript function that only executes once after a certain period of time. The simplest usage is as follows.

setTimeout(FUNCTION_NAME, DURATION);

Instead of the first parameter of the function, a function can be written directly or a defined function name can be written in the document. Second parameter represents duration.  The entered value is in milliseconds. For example, if we want to execute a function 20 seconds after the document is fully loaded, we can write a script like this:

function Foo(){
// Your Code
}

window.onload = function(){
    setTimeout(Foo, 20*1000);
}

According to the above script, the function named Foo will work 20 seconds after the document is fully loaded. Instead of writing a direct function name, you can write the operation you want to run directly in a local function as follows: 

window.onload = function(){
    setTimeout(function(){
        //  Your Code
    }, 20*1000);
}

The above example is the same as the example in which the Foo function is set as the first parameter. The code written in the local function will execute 20 seconds after the document is loaded.

setInterval

It is a JavaScript function that takes two parameters that repeat an operation at specific time intervals. Usage is like setTimeout function and takes two parameters. The first parameter represents the function to be executed, and the second parameter represents how many milliseconds this process is to be repeated. Example as follows:

setInterval(function(){
  //  Your Code
}, 2*1000);

For this example, the code we write into the local function will run for 2 second periods. Instead of writing a local function to the first parameter, a function name in the document can also be given.

Terminating setTimeout and setInterval

These two JavaScript functions work in a different thread in the document. Depending on our scenario, we may sometimes want to cancel the setTimeout or setInterval functions that have been set to not yet run or after running (for setInterval). he following script can prevent the execution of these two functions.

var i = setInterval(Foo, 10*1000);
clearInterval(i);

var t = setTimeout(Foo, 10*1000);
clearTimeout(t);

In the above examples, The functions setInterval and setTimeout were called with a variable assignment. With "clearInterval(i)" the setInterval function has been terminated. The function setTimeout has been terminated with "clearTimeout(t)".

In this article, I tried to explain the functions of setTimeout and setInterval in JavaScript as much as possible. I hope it was useful. If you have any questions, criticisms or suggestions, you can comment below this post or send me a message from here.