Set Timeout
1. The way setTimeout works is: when a timer is set to run after 5 seconds, it does not mean that it will execute immediately after 5 seconds, but that it will join the queue after 5 seconds. If there is nothing else in the queue after 5 seconds, the code of the timer will execute immediately, otherwise it will delay execution.
Therefore, the most important thing about the delayer is that the specified time interval (such as execution after setting 5 s) indicates when the delayer will be added to the queue, rather than when the code is actually executed.
Set Interval
1. One of the characteristics of timers is that they are executed at intervals of time (e.g. every 2s) and repeat all the time. Here's the problem: Set a timer A to execute every two seconds. If the execution time of a is longer than the time interval (2s), then the first execution of a is executed before the first execution, and then the second execution begins.
js skillfully avoids this problem - that is, when the timer code is executed, it will add the timer code to the queue, so the minimum time interval for the timer code to join the queue is specified (because the ideal state is that the timer's execution time is completed within the time interval).
2. The problem of using setInterval
(1) Some intervals will be skipped, such as setting every 1s to execute once, if the timer code execution time is greater than 1s, or exactly equal to 1s, then the equivalent code execution time is exactly equal to the interval time, then the interval time is occupied by the execution time, so there is no interval time, that is no interval time. Spacing.
The timer is used to make a countdown function, which has the functions of starting, stopping, continuing and resetting.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#content{display: block;width: 200px;height: 200px;border: 1px solid black;margin: 20px auto;text-align: center;line-height: 200px;font-size: 50px;}
#btn{width: 200px;height: 40px;border: 1px solid black;border-radius: 10px;margin: 20px auto;display: block;cursor: pointer;background: blue;color: #FFFFFF;font-size: 25px;}
</style>
</head>
<body>
<span id="content">
100
</span>
<input type="button" id="btn" value="start">//Define a function button
<script>
var ocontent = document.getElementById("content");
var obtn = document.getElementById("btn");
var start = ocontent.innerHTML;
var num = ocontent.innerHTML;
var timer = null; //Setting global variables
var onoff = 1; //switch
obtn.onclick = function(){
if(onoff == 1){ //When the switch equals 1, the start countdown function is executed.
clearInterval(timer); //Clear the timer to avoid bug s caused by repeated clicks on the switch
timer=setInterval(function(){
if(num == 1){
num = "It's over"
obtn.value="reset"
clearInterval(timer);
onoff = 2;
}else{
num--;
}
ocontent.innerHTML = num;
},100)
onoff =0; //Definition to pause function
obtn.value = "suspend" //When you click the button, obtn.value changes to pause
}else if(onoff == 0){ //Suspension function
clearInterval(timer);
onoff = 1; //Continue countdown after suspension
obtn.value = "Continue" //obtn.value becomes continuation
}else if(onoff == 2){ //Start reset function
obtn.value = "start";
onoff = 1;
num = start;
ocontent.innerHTML = start;
}
}
</script>
</body>
</html>
The results are as follows:
