JS中防抖与节流函数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/aliujiujiang/article/details/89453383

      在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

函数防抖（Debounce）

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

//防抖函数
function debounce(fn,wait){
	var timer;
	return function(){
		if(timer){
            //再次触发清除定时器
			clearTimeout(timer);
		};
		timer = setTimeout(function(){
			fn.handle();
		},wait);
	}
}

function handle() {     
 
  //执行函数
} 
window.addEventListener('scroll', debounce(handle, 1000));

函数节流（Throttle）

防抖有一个问题，那就是如果事件一直在触发，那么执行函数永远都得不到执行。这种情况下，函数节流此时是较好的方法。它与防抖最大的区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数。

function throttle(fn,wait){
	var lastTime = new Date().getTime();
	return function(){
		var curTime = new Date().getTime();
		if((curTime - lastTime) < wait){return;};
		lastTime = curTime;
		fn.handle();
	}
}