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

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

防抖（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)

当用户频繁触发