简单易懂的函数防抖与节流

1.防抖（debounce）

一个函数被不断触发，在连续触发期间不执行函数，在结束触发后指定时间后执行函数。

看代码：

function debounce(fn,interval){
	let timer;
	return function(){
		clearTimeout(timer);
		timer=setTimeout(()=>{
			fn.apply(this,arguments);
		},interval)
	}
}
//调用

function fun() {
    console.log(1);
}
let deb=debounce(fun, 2000); // 节流函数
document.getElementById('aa').onclick = function (e) {
   deb();
}

点击结束后2s后执行fun函数，如果连续点击间隔时间少于2s，不执行fun函数
应用场景：
比较常见的，举例比较多的浏览器窗口Resize，加上防抖，用户调整完窗口结束后才会计算窗口大小，防止重复渲染。

2.节流(throttle)

在指定的一段时间内，无论你触发多少次函数，都只执行一次，

看代码：
1.setTimout版，也是比较好理解用的很多的一种

function throttle(fn,interval){
	let isT=true;
	return function(){
		if(!isT) return;  
		isT=false;  //不到两秒，isT就是false,上一行的就会return;停止向下执行
		setTimeout(()=>{ //到了两秒，执行函数，isT变为true,
			fn.apply(this,arguments);
			isT=true;
		},interval)
	}
}

//调用
throttle(fun,2000); 

如果你一直的触发fun函数，fun每过两秒会执行一次。
2.利用时间戳实现节流

function throttle(fn,interval){
   let lastTime=0;
   return function(){
		let nowTime=+new Date();
		if(nowTime - lastTime > interval ){
			fn.apply(this, arguments);
            lastTime= nowTime;
		}
   }
}

是不是感觉时间戳的比定时器版的比较难理解。
拆解一下过程：

• 先定义一个初始变量lastTime，用来存放上一次的时间戳
• 获取当前时间戳nowTime，+new Date()就是获取时间戳，是不是又学到了
• 判断当前时间戳（nowTime）与上一次的时间戳（lastTime）相隔时间是否超过了规定时间（interval），如果超过了就执行fn函数，并把当前时间戳赋值给上一次时间戳，进行数据更新，
• 反复循环，用户每次触发，都会校验距离上次执行的时间是否已经超过了规定时间（interval），判断是否执行。

应用场景：

用户快速而频繁的提交表单
搜索联想功能

ok,本文到此结束。最后提醒，请看下本人的昵称