26、JavaScript学习笔记——定时器

定时器

1. setInterval()

setInterval()用于指定每隔一段时间执行某些代码。

setInterval()可以接收两个参数，要执行的代码（函数或字符串）和间隔时间（把下一次执行定时代码的任务添加到队列要等待的时间）。

比如，

setInterval(function () {
    console.log("a");
}, 2000);
1
2
3

表示每隔2000毫秒打印一次a。

注意间隔时间的单位是毫秒（ms）。

var time = 2000;
setInterval(function () {
    console.log("a");
}, time);
time = 30000;
1
2
3
4
5

在setInterval()后改变time不会改变该定时器的间隔时间。

实际上setInterval()的间隔时间是不准的，因为在原理上，浏览器不关心要执行代码什么时候执行或执行多长时间，只会在一定的时间间隔将任务添加到执行队列。

因此setInterval()适合执行时间短、非阻塞的回调函数。

2. clearInterval()

setInterval()会返回一个循环定时的ID，作为当前setInterval()定时器的唯一标识。

定时器的标识可以用于在某个时间点取消定时。

对于setInterval()而言，取消循环定时需要调用clearInterval()，并将自己的定时ID（标识）传入clearInterval()。

var timer = setInterval(function () {

}, 1000)

clearInterval(timer);
1
2
3
4
5

var i = 0;
var timer = setInterval(function () {
    console.log(i ++);
    if(i > 10){
        clearInterval(timer);
    }
}, 1000)
1
2
3
4
5
6
7

5. 练习

计时器，到三分钟停止。

html:

<p>
    minutes:
    <input type="text" value="0">
    seconds:
    <input type="text" value="0">
p>
<input type="button" value="start">
<input type="button" value="stop">
1
2
3
4
5
6
7
8

css:

input[type="text"]{
    font-size: 18px;
    text-align: right;
}
input[type="text"]:focus{
    outline: 2px lightblue solid;
}
input[type="button"]{
    width: 100px;
    height: 30px;
    margin: 30px 0 30px 150px;
}
1
2
3
4
5
6
7
8
9
10
11
12

js:

let sec = 0,
    min = 0;
let start = document.getElementsByTagName("input")[2];
let stop = document.getElementsByTagName("input")[3];
let flag = 0;
start.onclick = function () {
    flag = 0;
    let timer = setInterval(function(){
        
        if(sec > 59){
            sec = 0;
            min ++;
            start.previousElementSibling.firstElementChild.setAttribute("value", min);
        }
        start.previousElementSibling.lastElementChild.setAttribute("value", sec++);
        if(min > 2 || flag){
            clearInterval(timer);
        }
    }, 1000);
}
stop.onclick = function () {
    flag = 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

改进，上面的代码暂停是不及时的，因为点过stop按键之后，把flag置1，定时器还得执行一次才能到下面的if语句。而且本来设个flag变量来停止计时器本来就不是最直接的方法，所以下面将timer变量的定义拿到start点击事件函数的外面，然后在stop点击事件函数中就可以直接使用定时器的标识ID。

此外，之前还有一个bug，就是连续点击start会让计数加速，因为连续点击start会连续创建不同的定时器，在做定时器的作用下，计数速度翻倍。

为了解决这个问题，下面的程序加了一个“开关”，点击一次start会将开关关闭，再次点击start时是不会执行if语句里的创建定时器程序的。

let sec = 0,
    min = 0;
let start = document.getElementsByTagName("input")[2];
let stop = document.getElementsByTagName("input")[3];
let timer;
let key = true;
start.onclick = function () {
    if(key){
        key = false;
        timer = setInterval(function(){
            if(sec > 59){
                sec = 0;
                min ++;
                start.previousElementSibling.firstElementChild.setAttribute("value", min);
            }
            start.previousElementSibling.lastElementChild.setAttribute("value", sec++);
            if(min > 2){
                clearInterval(timer);
            }
        }, 1000);
    }
}
stop.onclick = function () {
    clearInterval(timer);
    key = true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26