js高级定时器

定时器分类

1、在某段时间执行单次回调操作----setTimerout
2、在某段时间重复执行一次回调操作------setInterval

重复定时器的弊端

1、定时器回调函数需要等主线程空闲时才可以执行指定操作；
2、如果队列任务太多，某些指定操作可能会被跳过，也会导致多个定时器代码执行之间间隔可能会比预期的小。
3、任务堆积：回调执行事件超过设定间隔，新回调会被推入任务队列，导致多个回调连续执行，因此引发性能问题

解决重复定时器性能问题的方式

1、数组分块（又称yeilding processes）

原理：先设置定时器，取出下一个任务进行处理，若还有任务，就继续设置定时器

代码实现：

function chunk (array,process,context){
	setTimerout(function(){
        //取出下一个任务进行处理
        var item = array.shift();
        process.call(context,item);
        //若还有任务，继续设置定时器
        if(array.length > 0){
            setTimerout(arguments.callee,100)
        }
    })
}
//调用
chunk(数组array,函数)

2、函数节流

原理：代码禁止在没有间断的情况下重复执行，在执行时先清除当前定时器，在再执行。

代码实现：

function throttle (method,context){
	clearTimerout(method.tId);
    method.tId = setTimerout(function (){
    	method.call(context);
    })
}

注意：本文归作者所有，未经作者允许，不得转载