什么是防抖和节流？有什么区别？如何实现及使用场景？

一句话概括就是：通过控制事件触发频率达到优化函数执行效率的效果

防抖（debounce）

当用户持续触发一个事件时，在n秒内事件没有再次触发，此时只执行最后一次回调。常用于输入框input搜索、防止按钮重复点击提交，调整窗口大小resize

// 防抖
function debounce(fn, wait = 600) {
	let timeId = null; //创建一个标记用来的返回值
	return function (...args) {
		if (timeId) {
			clearTimeout(timeId);//每当用户输入的时候把前一个setTimeout 清除掉
			timeId = null;
		}
		timeId = setTimeout(() => {//创建一个新setTimeout，输入字符后间隔n秒内如果还有输入操作的化，就不执行fn函数
			fn(...args);//args是传入的参数
		}, wait);
	};
}
function fn1() {
	console.log('防抖成功');
}
let inp = document.getElementById('inp')
inp.addEventListener('input', debounce(fn1))

节流（throttle)

当用户频繁触发一个事件时，每隔n秒，只执行一次回调。常用于scroll滚动加载，富文本编辑器实时保存。

// 节流
function throttle(fn, wait = 600) {
	let timeId = null;//通过闭包保存标记
	return function (...args) {
		if (!timeId) {//在函数开头判断标记是否为true，不为true则return
			timeId = setTimeout(() => { //将外部传入的函数执行放在setTimeout中
				fn(...args);//最后在setTimeout执行完毕后再把标记设置为true表示可以执行下一次循环了
				//当定时器没有执行的时候标记永远是false，在开头被return掉
				timeId = null;
			}, wait);
		}
	};
}
function sayHi(e) {
	console.log('节流成功yyds', e.target.innerWidth, e.target.innerHeight);

}
window.addEventListener('resize', throttle(sayHi))