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

迈不过友情╰ 2022-05-23 23:25 119阅读 0赞

## 一.定义 ##

### 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线程只是浏览器众多线程里的一部分，请看下面的代码和图来理解

![20180516181410713][]

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

## 五.被遗忘的参数 ##

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')
    })()

[20180516181410713]: /images/20220524/6637e18691a24a1684bd9d8fbb7e38ab.png