JavaScript高级定时器详解：重复定时器与函数节流

JavaScript定时器与代码队列机制

在JavaScript中，setTimeout()和setInterval()是创建定时器的基础方法，其基本用法在此不再赘述。重点在于理解JavaScript的代码队列机制：没有任何代码会立即执行，一旦进程空闲，代码便会尽快执行。因此，定时器中设定的时间并不等同于代码的实际执行时间，而是指代码会在指定时间间隔后被加入队列等待。若此时队列为空，代码才会执行，这造成了代码似乎在精确指定时间执行的假象，从而引发潜在问题。

重复定时器的问题与解决方案

重复定时器

通常，开发者使用setInterval方法以固定时间间隔重复执行代码。然而，该方法存在两个主要缺陷：一是某些时间间隔可能被跳过；二是多个定时器代码的执行间隔可能比预期更小。例如，若onclick事件处理程序使用setInterval设置了200ms的间隔，但处理程序本身耗时300ms，则会导致一个时间间隔被跳过，同时运行着定时器代码。通过以下代码可以验证这一结论：

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

每次函数执行时都会创建一个新的定时器，第二个setTimeout调用通过arguments.callee获取当前执行函数的引用，并设置另一个定时器。这种做法确保在前一个定时器代码执行完毕前，不会向队列插入新的定时器代码，从而避免任何间隔的缺失，并保证在下一次执行前至少等待指定的间隔时间，防止连续运行。这种方案一举两得，目前主流框架中的动画效果大多采用此方式实现重复定时。

函数节流优化浏览器性能

函数节流

定时器的作用不仅限于定时，还可用于缓解浏览器压力。浏览器中某些计算和处理操作比其他操作更为昂贵，例如DOM操作需要更多的内存和CPU时间。连续进行过多的DOM操作可能导致浏览器挂起甚至崩溃。函数节流的基本思想是：某些代码不能在无间断的情况下连续重复执行。首次调用函数时创建一个定时器，在指定时间间隔后运行代码。当第二次调用该函数时，会清除前一次的定时器并重新设置一个。其目的是在停止执行函数请求一段时间后，再执行代码。具体代码如下：

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数，第一个是要执行的函数，第二个是作用域。
//使用方法demo
//未使用情况：
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的，都应该使用节流。

这种处理方式对用户感知影响不大，但显著减轻了浏览器的压力。函数节流已成为许多框架常用的优化技巧之一。

以上是对JavaScript高级定时器的相关介绍，希望能为读者提供有益的帮助。