对于js中“节流“、“防抖“的理解

背景

在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃。
函数的节流与防抖就是为了解决类似需求而产生的
所以，这是前端性能优化的重点手段

节流防抖的作用：

1. 防止用户频繁点击发送请求导致程序出现问题
2. 减轻浏览器的负担，优化用户体验
3. 防止恶意操作
4. 防止浪费请求资源

什么是节流

1. 个人理解：是为了合理分配资源，限制资源请求频率，
2. 原理：在一定时间内，只能触发一次
3. 概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。（释放一次技能后要等到时间到了才可以再次释技能）
4. 使用场景：技能冷却、商品抢购、游戏中的刷新率，等等；
5. 代码：

let timer, flag;
/**
 * 节流原理：在一定时间内，只能触发一次
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, wait = 500, immediate = true) {
	if (immediate) {
		if (!flag) {
			flag = true;
			// 如果是立即执行，则在wait毫秒内开始时执行
			typeof func === 'function' && func();
			timer = setTimeout(() => {
				flag = false;
			}, wait);
		}
	} else {
		if (!flag) {
			flag = true
			// 如果是非立即执行，则在wait毫秒内的结束处执行
			timer = setTimeout(() => {
				flag = false
				typeof func === 'function' && func();
			}, wait);
		}
		
	}
};
export default throttle

什么是防抖

1. 原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
2. 概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。（就是你的技能在读秒的时候，你点击了技能，时间重置了却不会释放技能）
3. 使用场景：实时搜索，拖拽操作，页面滚动、登录提交，窗口大小调整，数据请求等等；
4. 代码：

let timeout = null;

/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 * 
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
 */
function debounce(func, wait = 500, immediate = false) {
	// 清除定时器
	if (timeout !== null) clearTimeout(timeout);
	// 立即执行，此类情况一般用不到
	if (immediate) {
		var callNow = !timeout;
		timeout = setTimeout(function() {
			timeout = null;
		}, wait);
		if (callNow) typeof func === 'function' && func();
	} else {
		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
		timeout = setTimeout(function() {
			typeof func === 'function' && func();
		}, wait);
	}
}

export default debounce

节流与防抖的共同点

1. 均是为了防止频繁触发、消耗过多资源而提出的解决方法。
2. 均是设定一个规定的空隙时间，只有等待时间超过空隙时间才会执行。

节流与防抖的区别

一直点击，当点击间隔时间小于规定时间时：
– 节流：会多次执行
– 防抖：不会执行