节流和防抖，见面知其意，就是节约流量和防止抖动。那他们分别代表什么意思呢？为什么要使用它们？又该如何去使用呢？
请往下看 ↓
什么是节流和防抖？
节流：高频率触发事件时每过n秒只执行一次，n秒内不会触发下一次。
什么意思呢？比如用户疯狂触发事件去向后台发送请求，那么这个时候呢，我们是有一个阀门的，只有每在特定时间内开启让你去执行一次，过了这个时间后才会执行下一次。等于说有了一个反应时间，就不会有你触发一次我请求一次这种情况。取而代之的是你随便触发，但我是反应一会请求一次，反应一会请求一次。
防抖：高频率触发事件时会在n秒后去执行，如果n秒内再次被触发，则清除之前的，重新开始。
什么意思呢？就是你在疯狂触发事件去发送请求，我会设置一个特定的时间段，这个时间段过后再发送你那个请求，每次都会在下一次请求发送时先看上一次请求是不是已经发出去了（也就是过没过那个时间段），如果上次请求完成了，那么我再进行下次请求，没有完成的话，我就会清除上次请求，重新开始。( 下次执行和上次执行的间隔大于设定时间就会执行 )
为什么要使用节流和防抖呢？
日常开发中，我们写的项目避免不了用户疯狂点击某些按钮或其他的东西去触发一些事件的回调（可能他们是点着玩）。比如操作DOM，再或者是那种会向后台发送请求的事件，频繁的发送就导致上一次请求还没响应，下次，下下次，下下下次...请求又发过来了，这样势必会导致服务器压力很多，也必然导致项目运行缓慢、卡顿。这也是对你项目整体一个稳定性的考验，此时就可以用防抖和节流解决这些问题。
日常手撕节流和防抖
<body>
<div class="btns">
<button>正常发送</button>
<button>节流发送</button>
<button>防抖发送</button>
</div>
<script>
let btns = document.querySelectorAll(".btns>button");
btns[0].addEventListener("click", function () {
console.log("我正常发送了一个请求 --- 正常");
})
// 使用节流处理 -- 延迟触发
let isShow = true; // 此时设置一个阀门 -- 默认关闭
btns[1].addEventListener("click", function () {
if (!isShow) return; // 点击值后判断阀门是否打开，打开能够向下执行，否则结束执行
isShow = false; // 进来后立马关闭阀门
setTimeout(() => {
console.log("我使用节流发送了一个请求 --- 节流");
isShow = true; // 过了延时时间，此时打开阀门
}, 1000);
})
// 使用防抖处理
let colseTimer = null; // 未来要用到的定时器此时为空
btns[2].addEventListener("click", function () {
clearTimeout(colseTimer); // 进来先清除上一次的定时器执行
colseTimer = setTimeout(() => {
console.log("我使用防抖发送了一个请求 --- 防抖");
}, 1000)
})
</script>
</body>以上代码的效果如下：
节流和防抖有哪些使用场景呢？
防抖：用户搜索东西的提示功能（你写完我再提示），不断调整浏览器窗口大小时（你比划完我在调整），再或者频繁点击点赞和取消时。
节流：监听滚动到页面最底部时再触发回调发送请求相关内容，通常这时候还会伴随DOM操作的加载动画
显示与隐藏。鼠标不断点击时隔段时间去执行一次。
补充： 节流和防抖的原理都是使用定时器去完成的，为了减少回调执行频率，节约计算资源。节流是将多次执行变为每间隔一段时间执行一次，而防抖是将多次执行变为规定时间外执行下一次时才会执行。
希望能够有所帮助！