How to use setTimeout() function in JavaScript?

JavascriptWeb DevelopmentFront End Technology

The setTimeout() function is provided by the window object, which calls the specified JavaScript function after the specified time only. This function will be called just once after waiting for the timeout set by the user.

It is similar to an alarm or reminder functionality. In the same way, we set up the timeout for the desired time period after which this function is called. This method is used where we are required to add a delay in the execution of a function. This method can also be used for animations or DOM manipulations in JQuert.

The input set up in the setTimeoutsetTimeout() function should be in milliseconds.

Syntax

setTimeout(function, milliseconds, param1, param2, ....)

Parameters

  • function − This is the desired function that needs to be executed after the desired time period.This is the desired function that needs to be executed after the desired time period.

  • Milliseconds − This represents the delay time in milliseconds.

  • param1, param2 − These are the optional parameters if required.

Return

A number is returned that contains the id of the timer. We can use this id with clearTimeout(id) to cancel the timer.

Example 1

In the below example, we have created a simple alert that is displaying some custom message. This message will be shown by the alert box when clicked. But since we have added the timeout in the button. The alert will only be executed after the specified time duration, which is 2 seconds in the below code example

#Filename: index.html

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <h2>The setTimeout() Method</h2>
   <p>Click the following button. Wait 2 seconds for alert "Hello".</p>
   <button onclick="myFunction()">Try it</button>
   <script>
      let timeout;
      function myFunction() {
         timeout = setTimeout(alertFunc, 2000);
      }
      function alertFunc() {
         alert("Hello User... Start Learning now!");
      }
   </script>
</body>
</html>

Output

When you click the "Try it" button, after 2 seconds an alert box will pop up showing the message.

Example 2

In the example below, we display the parameters passed to the myFunct() method after a time out of 3 seconds.

#Filename: index.html

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: red;">
      Welcome To Tutorials Point
   </h1>
   <h2>setTimeout() Method</h2>
   <p>In this example, we display the parameters passed to
   myFunc()</p>
   <div style="border: 2px solid black;">
      <p id="demo"></p>
   </div>
   <script>
   setTimeout(myFunc, 3000, "param1", "param2");
   function myFunc(p1, p2) {
      document.getElementById("demo").innerHTML = "Parameters: " + p1
      + " " + p2;
   }
   </script>
</body>
</html>

Output

When you execute the above program it will display the parameters passed to the myFunc() method.

raja
Updated on 28-Apr-2022 14:22:15

Advertisements