javascript定时器(setTimeout, setInterval)工作原理及被遗忘的第三，第四，第五.....个参数

一.定义

setTimeout(code, millisec):

在指定延迟时间后，调用一个函数或者执行一段代码

setInterval(code, millisec):

用指定时间周期性的调用一个函数或者执行一段代码

二.语法

setTimeout(code, millisec):

第一个参数为回调函数; 第二个参数为延迟时间，注意第二个参数的单位是毫秒；setTimeout会返回一个唯一标识，该标识可用来清楚定时器，例如：

var timerId = setTimeout(function(){console.log('settimeout')},1000);
cleartTimeout(timerId)

setInterval(code, millisec):

第一个参数为要周期执行的回调函数；第二个参数为试图将回调函数加入事件队列的时间的周期时间，注这里时间单位也是毫秒；这里还有一个注意点，在往事件队列里添加回调函数时，会先判断事件队列是否存在还没有执行的回调函数，如果存在就不会继续往事件队列里添加回调函数了。setInterval也会返回一个唯一标识，该标识亦可清楚setInterval定时器，例如：

var intervalId = setInterval(function(){console.log('setinterval')},1000);
clearInterval(intervalId)

三.执行原理

大家都知道，JavaScript是单线程执行的，setTimeout和setInterval执行原理其实也很简单。

setTimeout会在调用后的millisec时间间隔后往事件队列里添加回调函数，然后等待执行。 

setInterval会按照第二个参数的周期时间周期性的往事件队列添加回调函数，然后等待执行，这里的一个注意点是如果事件队列里的回调函数还没有执行，不会重复添加。

注：html5规定setTimeout和setInterval的延迟时间最少为4ms. 所以setTimeout(function(){},0)其实是setTimeout(function(){}, 4)

四. Javascript是单线程执行，不代表浏览器是单线程执行

JavaScript线程只是浏览器众多线程里的一部分，请看下面的代码和图来理解

<script>

    function test() {
        console.log('test')
    }
    
    (function(){

        var timerId = setTimeout(function(){
            console.log('timeout');
        }, 0);

        var intervalId = setInterval(function(){
            console.log('interval')
        },0);


        console.log("function");
    })()
    

</script>

上面的代码运行结果我就不贴出来了。自己猜猜，然后在浏览器里运行一下。

五.被遗忘的参数

setTimeout 和 setInterval 除了第一个和第二个参数外，还可以传递第三，第四，第五.....个参数。即：

setTimeout(code, millisec, arg1, arg2,......, argN)

setInterval(code, millisec, arg1, arg2,......, argN)

从第三个参数开始的所有参数都将作为第一个参数的参数。下面看代码：

(function(){
        var timer = window.setTimeout(function(){
            console.log(arguments[0]);   // 输出 a
            console.log(arguments[1])    // 输出 b
        }, 3000, 'a', 'b');

        var interval = window.setInterval(function(){
            console.log(arguments[0])  // 循环输出 c
        }, 3000, 'c')
})()