JS高级编程4-函数节流

函数节流

比起非DOM交互，DOM操作需要更多内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器变慢甚至崩溃。函数节流的设计思想就是让某些代码可以在间断情况下连续重复执行，实现的方法是使用定时器对函数进行节流。

例如，在第一次调用函数时，创建一个定时器，在指定的时间间隔后执行代码。当第二次调用时，清除前一次的定时器并设置另一个，实际上就是前一个定时器演示执行，将其替换成一个新的定时器。

var processor = {
timeoutId : null,
//实际进行处理的方法
performProcessing : function() {
//实际执行的方法
},
//初始处理调用的方法
process : function() {
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function() {
that.performProcessing();
}, 100);
}
};
//尝试开始执行
Processor.process();
简化模式：
function throttle(method,context){
clearTimeout(mehtod.tId);
mehtod.tId = setTimeout(function(){
method.call(context);
},100);
}

函数节流解决的问题是一些代码（特别是事件）的无间断执行，这个问题严重影响了浏览器的性能，可能会造成浏览器反应速度变慢或直接崩溃，如resize、mousemove、mouseover、mouseout等事件的无间断执行。这时加入定时器功能，将事件进行“节流”，即在事件触发的时候设定一个定时器来执行事件处理程序，可以在很大程度上减轻浏览器的负担。类似应用如支付宝中的“导购场景”导航，以及当当网首页左边的导航栏等，这些都是为了解决mouseover和mouseout移动过快给浏览器处理带来的负担，特别是减轻涉及Ajax调用给服务器造成的极大负担。例如：

oTrigger.onmouseover = function(e) {//如果上一个定时器还没有执行，则先清除定时器
oContainer.autoTimeoutId && clearTimeout(oContainer.autoTimeoutId);
e = e || window.event;
var target = e.target || e.srcElement;
if((/li$/i).test(target.nodeName)) {
oContainer.timeoutId = setTimeout(function() {
addTweenForContainer(oContainer, oTrigger, target);
}, 300);
}
}