什么是防抖?
功能：当事件被触发N秒之后再执行回调，如果在N秒内被触发，则重新计时。
防抖实现方式：
// func是用户传入需要防抖的函数 // wait是等待时间，若不传参，默认50ms // 因为闭包，timer将一直在内存中 const debounce = (func, wait = 50) => { // 缓存一个定时器 let timer = null; // 返回的函数是每次用户实际调用的防抖函数 return (...args) => { // 如果已经设定过定时器了就清空上一次的定时器 if (timer) clearTimeout(timer); // 开始一个新的定时器，延迟执行用户传入的方法 timer = setTimeout(() => { func.apply(this, args); }, wait); }; };
什么是节流?
功能：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效
节流实现方式：
// 函数节流，时间戳版本 // func是用户传入需要防抖的函数 // wait是等待时间，若不传参，默认50ms // 因为闭包，falg将一直在内存中 const throttle = (func, wait = 50) => { // 定义falg，初试为true let flag = true; // 返回的函数是每次用户实际调用的节流函数 return (...args) => { if (flag) { // 如果flag为true，则执行定时器 setTimeout(() => { func.apply(this, args); // 函数执行完毕后，将flag改回true // 以便下次再执行 flag = true; }, wait); } // 因为定时器是异步任务，定时器执行后，立刻将flag关闭 // 在等待延时时间时，阀门始终关闭，不会一直执行函数 flag = false; }; };
两者的使用场景有哪些？
函数防抖： 频繁操作点赞、登录注册、需要提交最新信息等等
函数节流： 懒加载分页请求资源、音乐播放进度条更新等等
