使用函数节流

一、前言　　

　　DOM的操作比起非DOM的操作需要更多的内存和CPU的使用，连续进行过多的DOM操作会使得浏览器挂起。在使用onresize事件处理或者元素绑定拖拽事件中特别容易发生。

函数节流就是解决这种问题一种方法。

二、函数节流

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

三、方法

《JS高程》中封装的方法：

 function throttle(method, context) {//执行函数、哪个作用域中执行
     clearTimeout(methor.tId);       //定时器的ID储存在执行函数的tId属性中，开始时候并不存在
     method.tId = setTimeout(function(){
         method.call(context);   //用call确保程序在适当的执行环境中执行
     }, 100);
 }

 function resizeDiv(){
    	var div = document.getElementById("myDiv");
    	div.style.width = 10 +　"px";
    	console.log(this);
    }

//调用
window.onresize = function(){

    throttle(resizeDiv);
}

　　

还看到有一种封装的方法

var throttle = function(fn,delay){ //执行函数、延迟时间
    	var timer = null;
    	return function(){
    		var context = this,args = arguments;	
    		clearTimeout(timer);
    		timer = setTimeout(function(){
    			fn.apply(context, args); //用apply把调用throttle时的this上下文传给执行函数
    		},delay);
    	}
    }
    //调用
    window.onresize  = throttle(resizeDiv,100);
   

　

四、使用场景

1、onresize事件

2、鼠标拖拽事件

3、点透的处理

。。。

其实，只要代码是周期性执行的，最好都使用节流。