JavaScript setTimeout() Usage Explained

setTimeout() is a method of the window object, which is used to call a function or evaluate an expression after a specified number of milliseconds.

The syntax can be in the following two forms:

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

Next, let's look at a simple example:

Example

setTimeout("alert('Sorry for the wait')", 3000 )

Try it Yourself »

In the test code, we can see that three seconds after the page opens, an alert dialog box appears.

setTimeout() sets a specified waiting time (in milliseconds). When the time is up, the browser executes a specified piece of code, as shown below:

setTimeout() can also be used to execute a specified function. In the following example, the text on the webpage will be modified after three seconds.

Example

<p id="content">Please wait for three seconds!</p> <script> setTimeout("changeState()",3000 ); function changeState(){ let content=document.getElementById('content'); content.innerHTML="<div style='color:red'>I am the content displayed after three seconds!</div>"; } </script>

Try it Yourself »

In the example, after setting a wait of 3 seconds (3000 milliseconds), the browser will execute the function changeState().

Next, we can use setTimeout() to repeatedly execute a specified function to implement a counter:

Example

<input type="text" id="displayBox" name="displayBox" value="0"> <script>x = 0 function countSecond() {　 x = x+1 document.getElementById("displayBox").value=x setTimeout("countSecond()", 1000) } // Execute the function countSecond()</script>

Try it Yourself »

In the example, the page executes the countSecond() function after loading. This function uses the setTimeout() method, which calls the countSecond() function every second. As a result, countSecond() is executed once per second, achieving the counting effect.

Of course, we can also add some code to the counter function to stop counting under specified conditions:

Example

<input type="text" id="displayBox" name="displayBox" value="0"> <script> x = 0 function countSecond() {　 if(x<20) { x = x+1 document.getElementById("displayBox").value=x setTimeout("countSecond()", 1000) } } // Execute the functioncountSecond() </script>

Try it Yourself »

In the example, when x is less than 20, the countSecond() function is executed once per second; when x is greater than or equal to 20, the execution stops.

Since there is starting a count, there must correspondingly be stopping the count. The function used to stop the timing is clearTimeout().

The setTimeout() method can make the browser continuously execute a piece of code or a function. When a setTimeout() starts a loop, if we want to stop it, we can use the clearTimeout() method.

clearTimeout() syntax:

clearTimeout(timeoutID)

timeoutID is the return value obtained when calling the setTimeout() function. Using this return identifier as a parameter, you can cancel the scheduled execution operation set by that setTimeout().

meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

Using meter1 and meter2 as the names for timeoutID, when setting clearTimeout(), you can specify which setTimeout() it applies to, without affecting the operation of the other setTimeout().

The following is an example:

Example

<form name="display1"> <input type="text" id="box1" name="box1" value="0" size="4" /> <input type="button" value="Stop timing" onclick="clearTimeout(meter1)" /> <input type="button" value="Continue timing" onclick="count1() " /> </form> <p></p> <form name="display2"> <input type="text" id="box2" name="box2" value="0" size="4" /> <input type="button" value="Stop timing" onclick="clearTimeout(meter2) " /> <input type="button" value="Continue timing" onclick="count2( ) " /> </form> <script>x = 0 y = 0 function count1( ) {　 x = x+ 1 document.getElementById("box1").value= x meter1=setTimeout("count1()", 1000) } function count2( ) {　 y = y+ 1 document.getElementById("box2").value= y meter2=setTimeout("count2()", 1000) } // Execute the functions count1( ) count2( )</script>

Try it Yourself »

Window Object:setTimeout() Method

Window Object:setInterval() Method