函数节流(throttle)和函数去抖

函数节流(throttle)和函数去抖(debounce)

前言

以下场景由于事件频繁被触发，因而频繁执行DOM操作，资源加载等重行为，导致UI停顿甚至浏览器崩溃

• window对象的resize、scoll事件
• 拖拽时的mousemove事件
• 射击游戏中的mousedown、keydown事件
• 文字输入、自动完成的keyup事件

注意： 函数的节流和函数的去抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质减少事件的触发次数

函数节流(throttle)

函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期

//fn 延时调用函数 delay 延迟多长时间，默认1秒 atleast至少多长时间触发一次
function throttle(fn,delay=1000,atleast){
	var timer = null,pervious = null;
	return function(){
		var self = this, args = arguments,nowTime = +new Date();
		if(!pervious) previous = nowTime;
		if(nowTime - pervious > atleast){
			fn.apply(self,args);
			previous = nowTime;
		}else{
			clearTimeout(timer);
			timer = setTimeout(function(){
				fn.apply(self,args);
			},delay);
		}
	}
}

函数去抖(debounce)

函数调用n秒后才会执行，如果函数在n秒内被调用的话，则函数不执行，重新计算执行时间)

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