In JavaScript, the setTimeout function is employed to invoke a specified function after a designated delay. Upon execution, this function yields a numerical value that signifies the unique ID of the timer.
In contrast to the setInterval function, the setTimeout function triggers the execution of a given function a single time. This function can be utilized with or without the window prefix.
The clearTimeout function allows us to terminate a timeout or to halt the execution of the function that was designated in the setTimeout function. The identifier returned by the setTimeout function can be passed as an argument to the clearTimeout function in order to revoke the timer.
The frequently employed syntax for the setTimeout method is presented as follows.
Syntax
window.setTimeout(function, milliseconds);
Parameter values
This approach accepts two parameters: function and milliseconds, which are specified as follows.
function: This refers to the construct that encompasses a segment of code intended for execution.
milliseconds: This parameter indicates the duration, in milliseconds, that elapses before the function executes. The default setting for this value is 0. It determines the frequency at which the code will run. If a value is not provided, the default of 0 will apply.
Let’s explore the application of the setTimeout function through a few examples.
Example1
This serves as a straightforward illustration of the setTimeout function. In this case, an alert dialog will pop up every two seconds. We do not implement any technique to halt the execution of the function indicated in the setTimeout function. Therefore, the setTimeout function runs the designated function just a single time, following the specified time duration.
Output
Following a duration of two seconds, the resulting output will be -
Example2
This is yet another illustration of utilizing the setTimeout function. In this scenario, a new tab is launched after a delay of two seconds and subsequently closes two seconds after it has been opened. The window.open function is employed to initiate the new tab, while the window.close function is used to terminate the tab that was just opened.
Since we are not implementing any mechanism to inhibit the execution of the function defined within the setTimeout method, the function will only run a single time, following the specified time delay.
<html>
<head>
<title> setTimeout() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setTimeout() method </h3>
<p> Here, a new tab will open after 2 seconds and close after 2 seconds. </p>
<script>
var a = setTimeout(fun1, 2000);
function fun1()
{
var win1 = window.open();
win1.document.write(" <h2> Welcome to the logic-practice.com </h2>");
setTimeout(function(){win1.close()}, 2000);
}
</script>
</body>
</html>
Output
Following a duration of two seconds, a new tab will appear as outlined below -
The newly opened tab will be automatically closed after a duration of two seconds.
Example3
In the preceding examples, we did not implement any mechanism to halt the execution of the function designated within setTimeout. In this context, we will utilize the clearTimeout method to terminate the execution of that function.
It is necessary to press the designated stop button at least two seconds prior in order to observe the result.
<html>
<head>
<title> setTimeout() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setTimeout() method </h3>
<p> Click the following button before 2 seconds to see the effect. </p>
<button onclick = "stop()"> Stop </button>
<script>
var a = setTimeout(fun1, 2000);
function fun1()
{
var win1 = window.open();
win1.document.write(" <h2> Welcome to the logic-practice.com </h2>");
setTimeout(function(){win1.close()}, 2000);
}
function stop() {
clearTimeout(a);
}
</script>
</body>
</html>
Output
The result will remain unchanged if the user presses the stop button prior to the two-second mark. Conversely, if the button is not clicked, a new tab will be launched after a duration of two seconds and subsequently close two seconds after it has opened.