【前端知识点总结】防抖与节流

在繁忙的企业级前端开发中，我们经常会遇到这样的问题：用户疯狂点击“提交”按钮导致后端收到重复请求；或者在搜索框输入文字时，每敲击一次键盘就触发一次接口请求，导致页面卡顿甚至浏览器崩溃。

要解决这些问题，就必须要请出前端性能优化的两员大将：防抖 与 节流。

一、 什么是防抖 与 节流？

虽然两者的目的都是为了限制函数的执行频率，但它们的策略截然不同。

1. 防抖

核心概念：将多次高频的操作优化为只在最后一次执行。也就是说，当事件触发后，等待一段时间（比如 500ms），如果在这段时间内没有再次触发该事件，才执行函数；如果在这段时间内又触发了事件，则重新计时。

生活中的比喻：你要坐电梯。电梯门即将关闭时，突然又有人按了按钮（或者你跑了过来），电梯就会重新计时等待关门。只有当最后一次按按钮后，没有人再按，门才会关上。

图解：---输入---输入---输入---输入(停顿)--- -> 执行

2. 节流

核心概念：
规定在一个单位时间内，只能触发一次函数。如果在这个单位时间内多次触发事件，只有第一次生效。它会稀释函数的执行频率。

生活中的比喻：
王者荣耀里的英雄技能冷却时间（CD）。你把技能