书山有路勤为径 学海无涯苦作舟 ，记录一下青春，也为了留下一些看得见的回忆😊。本文如有不足之处还望小伙伴们给予指正～
说到防抖和节流，想必已经是大家的老朋友了，他会在优化用户体验的时候频频使用，还会在各司面试中跟我们切磋切磋。
Javascript 中如何使用防抖和节流？
防抖和节流是控制函数在给定时间内执行多少次的技术，作用类似但具体概念不同。
防抖（Debounce） 将多个调用合并为一个调用。它强制一个函数在给定的时间段过去后才被调用，例如，“1 秒后，再执行此函数”。
节流（Throttle） 不允许一个函数在给定的时间段内执行多次，例如，“每秒最多执行一次这个函数”。
防抖（Debounce）
我们在高频率下执行某一事件，比如输入框输入的时候，如果每输入一次就调用一次接口，频繁发送请求造成页面卡顿，给服务器增加无用的请求，造成网络资源的浪费，很容易使服务器过载。这种场景下我们就可以使用防抖函数处理，把短时间内多次事件，变成只执行一次。
简单列举一下使用场景：
- 浏览器窗口大小改变
- input 输入联想、输入验证
- 实时保存
- ……
比如我们设定计时器在事件触发的 n 秒后再执行接口调用，当 n 秒内函数又触发的话，则重新计算调用接口的计时器，以此来减少请求次数。
附个小动图～
代码实现
const debounce = (fn, delay = 2000) => {
let timeOut;
return function() {
if(timeOut) {
clearTimeout(timeOut);
}
timeOut = setTimeout(() => {
fn();
},delay);
}
}
const runMe = () => {
console.log("我被执行了～");
};
// 在所要处理的事件上调用
const yourFunction = debounce(runMe, 2000);
节流（Throttle）
节流，顾名思义，就是在有限的时间内，限制他的流量。本来 1 秒钟可以执行10次，但是这样性能太差了，我们直接给他处理掉，让他 1 秒钟只执行 1 次，
简单列举一下使用场景：
- 鼠标连点
- 滚动事件
- 元素拖拽实现
- ……
附个小动图～
代码实现
const throttle = (fn, delay) => {
let toThrottle = false;
return function() {
if(!toThrottle) {
toThrottle = true;
fn()
setTimeout(() => {
toThrottle = false
}, delay);
}
};
};
const runMe = () => {
console.log('touch me');
};
// 在所要处理的事件上调用
const yourFunction = throttle(runMe, 2000);
