js中的函数节流

对于常见的场景，1、使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作，其高频率的更改可能会让浏览器崩溃。 
2、我们常见的一个搜索的功能，我们一般是绑定keyup事件，每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。

大部分节流都采用时间做节流，即时间间隔小于多少的不再调用，但同时保证一个最小调用间隔。（否则拖拽类的节流都将无效果），也可以用调用次数做节流，但要考虑最后一次调用需要要执行。

概念：函数节流是通过一个定时器，阻断连续重复的函数调用，从而一定程度上优化性能。

用途：主要用于用户界面调用的函数，如：resize、mousemove、keyup事件的监听函数。 
这类监听函数的主要特征： 
1、短时间内连续多次重复触发； 
2、大量的DOM操作。

意义：在用户察觉范围外，降低函数调用的频率，从而提升性能

函数节流的原理

函数节流的原理挺简单的，那就是定时器。当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就这样。

具体代码的实现，看到一个不错的方法：impress用的一个封装函数：

var throttle = function(fn, delay){
 	var timer = null;
 	return function(){
 		var context = this, args = arguments;
 		clearTimeout(timer);
 		timer = setTimeout(function(){
 			fn.apply(context, args);
 		}, delay);
 	};
 };

它使用闭包的方法形成一个私有的作用域来存放定时器变量timer。而调用方法为

window.onresize = throttle(myFunc, 100);

如果想要了解更多，参考文章：http://www.alloyteam.com/2012/11/javascript-throttle/