javascript setTimeout() usage summary, js setTimeout() method

Introduction

js's setTimeout method is more useful, usually used in page refresh, delayed execution, and so on. But many javascript novices still don't know the usage of setTimeout very well. Although I have studied and applied javascript for more than two years, sometimes I have to consult the materials for setTimeout method. Today, I will make a systematic summary of the setTimeout method of js.

The difference between setInterval and setTimeout

When it comes to setTimeout, it's easy to think of setInterval, because these two usages are similar, but they are different. Let's summarize today!

setTimeout

Definition and usage: the setTimeout() method is used to call functions or compute expressions after specified milliseconds. 　　

Syntax: setTimeout(code,millisec)

Parameter: Code (required): the JavaScript code string to execute after the function to be called. millisec (required): the number of milliseconds to wait before executing the code. Tip: setTimeout() executes code only once. If you want to call more than once, use setInterval() or have code itself call setTimeout() again.

setInterval

The setInterval() method calls a function or evaluates an expression in milliseconds over a specified period.

The setInterval() method calls the function until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method.

Syntax: setInterval(code,millisec[,"lang"])

Parameter: code required. Function to call or code string to execute. millisec must. The time interval, in milliseconds, between periodic code execution or calls.

Return value: a value that can be passed to Window.clearInterval() to cancel the periodic execution of code.

Difference

As can be seen from the above, the main differences between setTimeout and setinterval are:

SetTimeout only runs once, that is to say, when the set time is up, the specified code will be triggered to run, and then it will end. If the same setTimeout command is run again in the running code, it can be cycled. (that is, to cycle, the function itself needs to call setTimeout() again.)

While setinterval is cyclic, that is, every set time interval triggers the specified code. This is the real timer.

setinterval is simple to use, while setTimeout is flexible. It can exit the loop at any time, and it can be set to run at an irregular time interval, such as 1 second for the first time, 2 seconds for the second time, and 3 seconds for the third time.

Personally, I prefer to use setTimeout more!

Usage of setTimeout

Let's run a case together. First, open Notepad, paste the following code, and run the effect!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms Blog demo page </font> </h1>
<p> Please wait three seconds.!</p>

<script>
setTimeout("alert('I'm sorry, haorooms Blog requires you to wait for a long time')", 3000 )
</script>

</body> 
</html>

The page will pop up a picture frame after three seconds! This case applies the most basic syntax of setTimeout. SetTimeout will not be executed repeatedly automatically!

setTimeout can also execute function s, and can be repeatedly executed! Let's do another case:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

You can see the number in the input text box increasing by one second! Therefore, setTimeout can also make time jitter in web pages!

There is no case, and learning will not be fast. Let's do an example to calculate your stay time on a page of haorooms:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin()",60000)
}
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> Are you here? haorooms The stay time in a blog is: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> branch </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> Seconds.</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

How about using setTimeout () in the above example? I'm sure you know all about it!

clearTimeout( )

Let's take a look at clearTimeout(),

clearTimout() has the following syntax:

clearTimeout(timeoutID)

To use clearTimeout(), when we set setTimeout(), we need to give this setTimeout() a name, which is timeoutID. When we call a stop, we use this timeoutID to call a stop. This is a custom name, but many people call it timeoutID.

In the following example, set two timeoutids, named meter1 and meter2, as follows:

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

With the timeoutID names of meter1 and meter2, when clearTimeout() is set, you can specify which setTimeout() is valid for and will not interfere with the operation of another setTimeout().

Let's look at the case of clearTimeout()

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
x = 0
y = 0
function count1()
{　x = x + 1
　 document.display1.box1.value = x
　 meter1=setTimeout("count1()", 1000)
}
function count2()
{　y = y + 1
　 document.display2.box2.value = y
　 meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body> 
<p> </br>
<form name="display1">
    <input type="text" 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>
<form name="display2">
    <input type="text" 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>
    count1()
    count2()
</script>
</body>
</html>

Epilogue

Through the above explanation, I don't know if you know about setTimeout. Will you be very skilled in using setTimeout next time? Will setTimeout and setInterval be confused again? If you have something you don't know, you can communicate with each other and improve together. Thank you!

Article from: https://www.haorooms.com/post/js_setTimeout

Posted by salomo on Thu, 05 Mar 2020 05:57:10 -0800

Programmer Group