标签：set div 函数 内存 int apply timeout images size
在JS中，函数的调用大多数都是由用户主动调用触发，但是在有的事件中，比如mousemove、window.onresize、touchmove中，函数的调用次数会非常频繁，从而消耗浏览器大量的内存空间，造成浏览器卡顿甚至假死的问题。所以函数节流的目的就是减少函数在这些事件中的调用次数，从不可控制到可控。
函数节流的实现方式有很多中，通用的原理就是使用setTimeout函数，延迟执行事件处理函数，在没有执行这个函数前，再次调用它时都忽略，具体实现方式如下：
/* * 节流函数 * fn 事件中实际需要调用的函数 * interval 函数最短隔多长时间调用 * */ var throttle = function(fn , interval){ var _self = fn , timer , //定时器 isFirst = true; //是否是第一次调用 return function(){ var args = arguments , _this = this; if(isFirst){ //如果是第一次执行，不需要走定时器 _self.apply(_this , args); return isFirst = false; } /*从第二次执行就要开始走定时器了*/ if(timer) return; //如果定时器内的函数还未执行return timer = setTimeout(function(){ //定时函数 clearTimeout(timer); timer = null; _self.apply(_this , args); } , interval || 100) } } //测试 window.onresize = throttle(function(){ console.log(222); } , 500);
然后可以对比下不使用throttle方法，会发现打印的频率明显的降低
搞定！！！
标签：set div 函数 内存 int apply timeout images size
原文地址：http://www.cnblogs.com/skyHF/p/7494936.html
