Summary of setTimeout of of javascript
- 2021-12-09 08:08:04
- OfStack
1. Preface
js
Adj.
setTimeout
Method is more useful, usually used in page refresh, delayed execution and so on. However, many novices to javascript still don't know much about the usage of setTimeout. Although I study and apply
javascript
It's been over two years, but yes
setTimeout
Methods, and sometimes you have to consult information. Today's js
setTimeout
Methods to make a systematic summary.
2. The difference between setInterval and setTimeout
Said
setTimeout
It's easy to think of
setInterval
Because these two usages are similar, but there are differences, so I summarized them today.
3. setTimeout
Definition and usage:
setTimeout()
Method is used to call a function or evaluate an expression after a specified number of milliseconds.
Syntax:
setTimeout(code,millisec)
Parameter: code (required): To be executed after the function to be called
JavaScript
Code string.
setTimeout0
(Required): The number of milliseconds to wait before executing the code.
Tip: setTimeout () only executes code once. If you want to call more than once, use setInterval () or have code itself call setTimeout () again.
setInterval:
setTimeout1
Method can call a function or evaluate an expression at a specified period in milliseconds.
setTimeout1
Method will keep calling the function until
setTimeout3
Is called or the window is closed. By
setTimeout4
The returned ID value can be used as
setTimeout3
The parameters of the method.
Syntax:
setTimeout6
Parameters:
setTimeout7
Necessary. The function to call or the string of code to execute.
setTimeout8
Must. Execute or call periodically
setTimeout7
The time interval between, in milliseconds.
Return value: 1 can be passed to
javascript0
Thereby canceling the
setTimeout7
Gets or sets the value of periodic execution of.
Difference:
As can be seen from the above,
setTimeout
And
javascript3
The main differences are:
setTimeout
Run only once, that is to say, when the set time comes, it will trigger the operation of the specified code, and it will end after the operation. If you run the same code again
setTimeout
Command, it can be run in a loop. To loop, the function itself is called again
setTimeout()
)
And
javascript3
It runs in a loop, that is, the specified code is triggered every set time interval. This is the real timer.
javascript3
Easy to use, and
setTimeout
It is flexible, can exit the loop at any time, and can be set to run at irregular time intervals, 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 than 1!
4. Usage of setTimeout
Let's 1 up to run a case, first open Notepad, the following code paste, run 1 under 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 demonstration page </font> </h1>
<p> Please wait 3 Seconds !</p>
<script>
setTimeout("alert(' I'm sorry , haorooms How long does the blog ask you to wait ')", 3000 )
</script>
</body>
</html>
The page will pop up after staying for 3 seconds! This case applies
setTimeout
The most basic grammar,
setTimeout
It will not be repeated automatically!
setTimeout
You can also execute
function
, but also can be repeated!
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>
We can see that
input
The number in the text box is incremented in 1 second and 1 second! So,
setTimeout
You can also make time beats in web pages!
Without a case, learning will not be very fast. Let's do another example and calculate your
haorooms
Time spent on a page:
<!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> You're in haorooms The stay time in the blog is : </td>
<td>
<form name=displayMin>
<input type=text name=displayBox value=0 size=4 >
</form>
</td>
<td> Points </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, through the above example, right
setTimeout（）
I believe you understand the usage of!
5. clearTimeout ()
Let's take another look at it
clearTimeout( )
,
clearTimout () has the following syntax:
clearTimeout(timeoutID)
To use the
clearTimeout( )
, we set
setTimeout( )
When, give this
setTimout( )
1 name, this name is
timeoutID
This is what we use when we call a stop
timeoutID
To stop, this is a custom name, but many people use it with
timeoutID
For the name.
In the following example, set two
timeoutID
, named meter1 and meter2 respectively,
As follows:
timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)
Use this meter1 and meter2
timeoutID
Name, in setting
clearTimeout( )
You can specify which 1
setTimeout0
Effective without disturbing the operation of another setTimeout ().
See the case of clearTimeout () below;
<!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=" Continued 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=" Continued timing " onClick="count2() " >
</form>
<script>
count1()
count2()
</script>
</body>
</html>