setTimeOut

setTimeOut原理

• 上一次我在写 animation()函数的时候，说到了 setTimeOut的一些特点，这一次就是为了验证这些特点
• setTimeOut 并不是在过了执行的时间（这个时刻）会立即触发，这个要看过了指定时间之后事件队列里当前的事件是否是空，如果是，那么在那么时刻就会触发，如果不是，那么就是过了指定的时间之后，等待事件队列里当前的事件执行完才会触发
• 因此 setTimeOut可能会出现这种情况，过了指定时间之后不会立即出发，需要过了一会才会触发

测试 setTimeOut

var time = Date.now()
setTimeout(()=>{
    console.log(Date.now()-time)
    console.log("setTimeOut...")
},300)
console.log("ok...")

• 可以看见 过了指定时间之后，当前的事件队列为空，因此 setTimeOut可以在 300ms过后立即触发，但是如果将当前的事件数量增加了再来看看

var time = Date.now()
setTimeout(()=>{
    console.log(Date.now()-time)
    console.log("setTimeOut...")
},300)
// 2000 个 console.log("ok...")
console.log("ok...")

• 可以看见这个时候已经不是300ms触发了，而是 764ms触发了
• 延迟函数 setTimeout() 相当于将延迟之后执行的事件（也就是异步事件，或者说将来要执行的事件插入到当前事件队列里的最末尾，至于在不在指定时间之后立即触发，就要看看那个之后事件队列里是不是为空，如果是，就会立即触发，如果不是，那么就要等待当前的事件队列为空才会执行）