前言:
javascript提供两个定时器方法来实现定时的效果,setIterval和setTimeout,同时提供两个清除定时器的方法clearInterl和clearTimeout.
一、定时器的作用:
延迟脚本执行
自动执行重复操作
二、定时器的特点(以下均以setTimeout为示例,setInterval原理一样)
1.定时器的执行顺序
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, 10)
}
执行以上代码,发现控制台打印出5个5,原因:
javascript是单线程,setTimeout是一个异步任务,js引擎在执行javascript任务时,会先执行所有在js引擎任务中的代码,在本例中,js引擎从上往下执行,发现setTimeout异步任务,把任务推到任务队列中,待10ms后(本例setTimeout设置的时间是10ms),setTimeout任务被加到js主线程中,若此时没有其他任务,则setTimeout任务被执行,若仍然存在其他任务,则setTimeout待其他任务被执行完成后才开始执行.本例中,每个setTimeout任务设置的时间均为10ms,若在10ms的时间内for循环没有执行完,那么setTimeout任务则会等待超过10ms的时间,一直到for循环执行完之后才会被执行.由此也可以说明,定时器的时间并不是完全准确,会大于或者等于设置的时间.
2.定时器id
看下面一段代码:
var timer = setTimeout (function () {...}, 10)
console.log(timer) // 数字
timer实际上是定时器的id,是一个数字,把timer传入clearTimeout中可以用来清除定时器,在遇到多个定时器的场景,为了避免一个定时器任务执行时其他定时器的影响,一般将所有的定时器id放到数组中,某一个定时器任务执行时,遍历清除数组中其他定时器任务,从而消除其他定时器的影响.
3.setTimeout和setInterval的区别
setTimeout,指定一个setTimeout任务,只执行一次
setInterval,指定一个setInterval任务,无限执行,直至被clearInterval清除才停止
4.定时器的巧妙运用
定时器在项目中除了可以作为定时的作用外还可以用来做耗时代码的优化：
我们假设有这样的一个场景，就是在某个页面中要渲染50万个节点，这个时候对于一般的项目中，直接渲染是不可取的，因为这个时候会占用过多的内存，导致浏览器出现了卡死的状态，用户误以为是页面卡死而 直接关闭浏览器或者杀死进程，即使是用户不关闭页面这样给用户的体验也是不好的，这个时候我们要怎样来解决这个问题呢，我们可以利用定时器来优化这个问题首先我们可以把50万个节点分成多组，每组渲染的节点数不要过多，然后通过setInterval来进行循环这个既不阻塞JS引擎线程的运行，又可以提高渲染的消耗时间。从而达到最终的优化渲染.
