深入理解setTimeout setInterval记录

常见用法：

setTimeout(() => {
	
},1000)

第一个参数类型

• 函数 setTimeout(() => { console.log(000) },1000) //执行代码 一秒后控制台输出000 字符串 setTimeout("console.log(000)",1000) //执行代码 一秒后控制台输出000 理解：其实写的所有js代码都是字符串，因为script会将js代码解析为字符串。将字符串传入定时器的第一个参数，执行代码后依然可以调用输出内容，是因为传入的第一个参数经过了两次解析，第一次由定时器，第二次由script脚本。所以这种写法会降低性能，尽量不用。

第二个参数

传入数值，代表延迟(setTimeout)或间隔(setInterval)多长时间，单位是毫秒

第三个及之后的参数

第三个开始的参数都会被传入定时器的第一个函数参数中。

const time = setTimeout((...args) => {
	console.log(args)
},1000,1,2,3,4,5)
//执行代码 输出[1,2,3,4,5]
//给定时器传参一般不使用上面的方法，但是遇到了要知道意思
//常用给定时器传参方法如下
function test(a,b){
	console.log(a + b)
}
const time1 = setTimeout(()=>{
	test(1,2)
},1000)

定时器的返回值

const time1 = setTimeout(() => {},1000)
const time2 = setTimeout(() => {},1000)
const time3 = setInterval(() => {},1000)
console.log(time1, time2, time3)
//执行代码 输出1 2 3

理解：定时器返回的是它的标识，这个标识依据代码中定时器的数量而定，一般情况下从1开始累加，在代码从上到下是第几个定时器，对应的定时器标识就是几，不论是setTimeout还是setInterval。所以清除定时器时传入的就是定时器标识，而清除定时器是不在乎定时器里面的代码有没有执行完或者是否执行的，比如以下代码均不会有输出。

const time = setTimeout(() => {
	console.log(111)
},1000)
clearTimeout(time)

const time2 = setTimeout(() => {
	console.log(123)
},1000)
clearInterval(time2)

定时器的this指向

首先简单理解隐式丢失

let obj = {
	a:function(){
		console.log(this)
	}
}
let b = obj.a
b()
//执行代码 输出window对象

以上代码发生了隐式丢失现象：let b = obj.a 中b只是引用了obj中函数a，b()调用函数，此时函数中的this没有找到对象赋值，所以发生了默认绑定，即在非严格模式下将this绑定给浏览器的window对象。 在以下代码中同样发生隐式丢失现象：

let obj = {
	a:function(){
		console.log(this)
	}
}
const time = setTimeout(obj.a,1000)
//执行代码 输出window对象。
//在定时器中传obj.a而不是obj.a()就可以调用函数，是因为定时器可以自动触发调用函数

所以在如果想要改变定时器中使用的函数的this指向，用以下两种方法：

/ 1. bind()
let obj = {
	a:function(){
		console.log(this)
	}
}
const time = setTimeout(obj.a.bind(obj),1000)

/ 2. 匿名函数
let obj = {
	a:function(){
		console.log(this)
	}
}
const time = setTimeout(function(){
	obj.a()
},1000)

最小时间间隔

使用定时器不传第二个参数时会默认值为0，但是html5规范setTimeout的最小时间间隔为4ms，setInterval的最小时间间隔为10ms。同时因为目前浏览器的刷新频率为1000ms60次，即每一次刷新需要16.6毫秒，所以如果要做一个看上去流畅的动画效果，时间间隔最好不要小于17毫秒。