最详细的JS学习笔记(连载)第二章、函数（定时器）

10、定时器

(1)、setInterval

setInterval(间歇性定时器)：功能创建一个定时器，可按照指定的周期(以毫秒计)来调用函数或计算表达式；

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由setInterval()返回的ID值可用作clearInterval()方法的参数；这种定时器只要创建了就等于启动。

语法：setInterval(函数名，时间)

可以有第三个参数，第三个参数作为第一个参数(函数)的参数

第一个参数是函数，有三种形式：

　　       1)、传函数名，不用加引号，也不加括号，如 setInterval( func, 1000)

　　       2)、传匿名函数，实际和1是一样的

3)、传函数字符串，加引号，也要加括号。如 setInterval("func()",1000); // 这种方法，会在全局作用域下查找函数，有时候有问题。所以推荐前两种

功能：每隔参数2的时间内，就调用一次参数1的函数。注意：时间以毫秒来计算的！

如果要关闭setInterval设置的定时器，首先就要获取setInterval返回的ID值，然后通过clearInterval(返回的ID值)来关闭特定的setInterval设置的定时器。

实例：

var timer = window.setInterval(func,5000);  var timer = window.clearInterval(function(){

function func(){                           console.log("Hello World");

console.log("Hello World");           },5000);

}

这里就创建了一个每隔5000毫秒就执行函数名为func的定时器，在函数中执行打印"Hello World"。当然，左面也可以换成为右边这样来写，两者的功能是一毛一样的,只不过后面的是匿名函数而已！  

清除定时器 clearInterval(timer);

这里就通过创建定时器时存储在timer中的ID值，进行销毁特定ID的定时器。

<div id="div1" style="position: absolute;left: 20px;top: 20px;width: 50px;height: 50px;background-color: red"></div>

        var timer;

        var div1 = document.getElementById("div1");

        div1.onclick = function(){

            timer = setInterval(function(){

                console.log(timer);

            },1000);

        }

这里通过JS获取到id为"div1"的div，给其增加点击事件后，只要点击div后，就会打印当前定时器的id。下面就是div的样式和不断的点击之后打印的结果。

打印结果可以看出，当我们不断的点击div后，timer的值也在不断的改变，说明了定时器在不断的制造出来，以至于在一定时间内打印的次数在不断的增加，timer的值也被不断新建的定时器赋值。也说明了timer就是定时器的返回值。

(2)、setTimeout

setTimeout(延时定时器)：用于在指定的毫秒数后调用函数或计算表达式。

就相当于设置了一个定时炸弹，在你设定的特定时间之后，它就会被激活，自行爆炸，爆炸之后它也不会再次爆炸！

setTimeout定时器也是这样，其只执行一次。如果要多次调用，请使用 setInterval() 或者自身再次调用 setTimeout()。

语法：setTimeout(函数名，时间);
功能：参数2时间后调用参数1函数
返回值：也是返回定时器的id，可以通过该id关闭定时器

如果要关闭setTimeout设置的定时器，方法原理同setInterval类似，不同的也就是方法名的不同。用的是clearTimeout(参数)，后面的参数也就是setTimeout要返回的id值。

<button οnclick="closeTimeout()">关闭延时定时器</button>

        var timer = window.setTimeout(func,5000);

        function func(){

            console.log("Hello World");

        }

        function closeTimeout(){

            window.clearTimeout(timer);   // 关闭延时定时器

        }

这里设置了5秒后就会只打印一次的延时定时器，然后给按钮增加了清除定时器的方法，一旦按下button，延时定时器就会被销毁了；不过，需要注意的是如果你在延时定时器销毁之后点击是没有任何效果的，因为延时定时器执行了一次之后它就自动销毁了！(对着setInterval说：看看人家多自觉！ setInterval弱弱地说：可是它功能没我强大啊！我默默不说话。。。)

不点击按钮5秒后的结果.png                5秒之前点击清除定时器后的效果.PNG

定时器的回调：

其1：定时器的回调函数并不是相当于在时间到了就执行，而是有一个主js执行进程，这个进程是页面刚加载的时候页面按照加载顺序执行的js代码，此外还有一个需要在进程空闲的时候执行的代码队列，而我们所说的定时器的回调就是相当于setInterval在特定时间之后把定时器回调放入到空闲队列中(注意，空闲队列有可能还有其它的代码，比如点击事件，因此定时器回调放入的位置不一定是空闲队列的开始位置！)

其2：setInterval有个很烦的地方就是当js主程序空闲时候，执行代码队列里面的代码的时候，如果此时候我们有一个问题，定时器是等到回调执行完，才开始计时进行下次循环呢？还是只要一次计时完毕，插入回调之后不管回调执不执行就开始计时呢？答案显然是后者，这也就是我说setInterval坑比的原因啊，因为这会出现一种情况，当我们插入回调的时候前队列有别的代码在执行，这时候回调肯定是不会执行的，因此如果这个时候限定时间到了会再次插入回调，这个时候如果发现队列中的第一次回调没有执行，那么再次插入的回调浏览器就默认取消(这是以防出现回调连续执行多次的情况)但是这又引发了新的情况就是有些回调是不能取消掉的？

---

本人是以网络视频与网络文章的方式自学的，并按自己理解的方式总结了学习笔记。有不正确之处请各位高手多多指点，一起学习进步。【VX：czlingyun    暗号：CSDN】