1. What is a JavaScript timer?
In JavaScript, we can execute code after a set interval, rather than executing it immediately after the function is called.
2. Timer type
One-time timer: Triggers only once after a specified delay time.
Interval Trigger timer: Triggers once every interval of time
3. Timer method
1): Disposable timer
A): settimeout (): Executes the code after the specified delay time, and executes it once
Syntax: settimeout (code, delay time);
Parameter description:
1. The function to invoke or the code string to execute.
2. Latency: The amount of time to wait before executing the code in milliseconds (1s=1000ms).
B): Cleartimeout (): Canceling settimeout () setting
Syntax: cleartimeout (timer)
Parameter description:
Timer: The ID value returned by settimeout (). This value identifies the block of deferred execution code to be canceled.
Call settimeout () and cleartimeout () Delay methods:
Copy Code code as follows:
<! DOCTYPE html>
<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>
<body>
<script type= "Text/javascript" >
Defining Printing methods
function Print ()
{
Console.log ("I am printing!");
}
var timer;//This value identifies the block of deferred execution code to be canceled
Start printing
function Startprint ()
{
Timer=settimeout (print,1000)//Call timer, delay 1 seconds to print, only once
}
End Printing
function Stopprint ()
{
Cleartimeout (timer);/Cancel Timer
}
</script>
</body>
Call settimeout () and cleartimeout () Infinite loop method:
Copy Code code as follows:
<! DOCTYPE html>
<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>
<body>
<script type= "Text/javascript" >
Defining Printing methods
function Print ()
{
Console.log ("I am printing!");
Timer=settimeout (print,1000);/start timer, call yourself, make infinite loop
}
var timer;//this value represents a block of code to cancel deferred execution
Start printing
function Startprint ()
{
Print ()//Call printing method
}
End Printing
function Stopprint ()
{
Cleartimeout (timer);/Cancel Timer
}
</script>
</body>
2): Interval trigger Timer
A): SetInterval (): At execution time, code is executed at specified intervals after the page is loaded
Syntax: setinterval (code, interaction time);
Parameter description:
1. Code: The function to invoke or the code string to execute.
2. Interaction time: The time interval between periodic execution or invocation of an expression, in milliseconds (1s=1000ms).
return value:
A value that can be passed to Clearinterval () to cancel the periodic execution of "code".
Call function format (assuming there is a clock () function):
SetInterval ("clock ()", 1000) or setinterval (clock,1000)
B): Clearinterval () method to cancel the interaction time set by SetInterval ()
Syntax: clearinterval (timer)
Parameter description:
Timer: The ID value returned by SetInterval ().
Invoke SetInterval () and clearinterval () execution interval execution method instance
Copy Code code as follows:
<! DOCTYPE html>
<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>
<body>
<script type= "Text/javascript" >
Defining Printing methods
function Print ()
{
Console.log ("I am printing!");
}
var timer;//this value identifies the timer execution code block to be canceled
Start printing
function Startprint ()
{
Timer=setinterval ("Print ()", 1000);//Start Timer
}
End Printing
function Stopprint ()
{
Clearinterval (timer);;/ /Cancel Timer
}
</script>
</body>
The above is the entire content described in this article, I hope that the small partners can enjoy.