1.What is a JavaScript timer?
In JavaScript, we can execute code after a set interval, rather than immediately after the function is called.
2. Timer type
One-time timer: Triggered only once after the specified delay time.
Interval trigger timer: triggers once every certain time interval
3. Timer method
1): One-time timer
A): setTimeout(): Execute the code after the specified delay time and execute it once.
Syntax: setTimeout (code, delay time);
Parameter description:
1. The function to be called or the code string to be executed.
2. Delay time: The time to wait before executing the code, in milliseconds (1s=1000ms).
B): clearTimeout():Cancel setTimeout()
Syntax: clearTimeout(timer)
Parameter description:
timer: The ID value returned by setTimeout(). This value identifies the delayed execution code block to be cancelled.
Call setTimeout() and clearTimeout() delay methods:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript timer</title>
<input type="button" value="start" id="btnStart" onclick="StartPrint()">
<input type="button" value="pause" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//Define the printing method
function Print()
{
console.log("I'm printing!");
}
var timer;//This value identifies the delayed execution code block to be cancelled
//Start printing
function StartPrint()
{
timer=setTimeout(Print,1000);//Call the timer, delay printing by 1 second, only execute once
}
//End printing
function StopPrint()
{
clearTimeout(timer);//Cancel timer
}
</script>
</body>
</html>
Call setTimeout() and clearTimeout() infinite loop methods:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript timer</title>
<input type="button" value="start" id="btnStart" onclick="StartPrint()">
<input type="button" value="pause" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//Define the printing method
function Print()
{
console.log("I'm printing!");
timer=setTimeout(Print,1000);//Start the timer, call yourself, and perform infinite loop
}
var timer;//This value indicates the code block to cancel the delayed execution
//Start printing
function StartPrint()
{
Print();//Call the printing method
}
//End printing
function StopPrint()
{
clearTimeout(timer);//Cancel timer
}
</script>
</body>
</html>
2): Interval trigger timer
A): setInterval(): When executing, the code is executed every specified time after the page is loaded.
Syntax: setInterval (code, interaction time);
Parameter description:
1. Code: The function to be called or the code string to be executed.
2. Interaction time: The time interval between periodic execution or calling expressions, measured in milliseconds (1s=1000ms).
Return value:
A value that can be passed to clearInterval() to cancel periodic execution of "code".
Call function format (assuming there is a clock() function):
setInterval("clock()",1000) or setInterval(clock,1000)
B): The clearInterval() method cancels the interaction time set by setInterval()
Syntax: clearInterval(timer)
Parameter description:
timer: The ID value returned by setInterval().
Calling setInterval() and clearInterval() to execute interval execution method instance
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript timer</title>
<input type="button" value="start" id="btnStart" onclick="StartPrint()">
<input type="button" value="pause" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//Define the printing method
function Print()
{
console.log("I'm printing!");
}
var timer;//This value identifies the timer execution code block to be cancelled
//Start printing
function StartPrint()
{
timer=setInterval("Print()",1000);//Start timer
}
//End printing
function StopPrint()
{
clearInterval(timer);//Cancel timer
}
</script>
</body>
</html>
The above is all the content described in this article. I hope you can like it.