一、为什么要防抖和节流？
我们在开发程序的过程中，可能会频繁的点击某一个事件，或者短时间内请求多次接口，对事件处理函数的频率没有进行限制，从而导致浏览器卡顿或者卡死，导致用户体验非常差。防抖和节流函数就是为了限制函数的执行次数和 短时间内不必要多次执行函数，从而提高项目性能。
二、防抖
防抖就是事件触发n秒后再执行回调函数，但此时在n内，多次触发事件，则重新计时，保证代码只执行一次。
代码：
function debounce (fn, await) { let timer = null // 定义一个定时器的变量 return function () { // 用闭包返回一个函数，解决this指向问题 if (timer) { // 如果存在定时器，再次触发事件，则清空定时器，重新计时 clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, arguments) // 改变执行函数的this指向，将原先执行函数的this指向改为当前环境 }, await) // 延迟多少毫秒执行 } }
使用场景：
- scroll事件滚动
- 浏览器窗口的缩放resize事件
- 搜索框输入查询的时候
- 表单验证
- 按钮的提交事件
![[Oracle]面试官：你举例几个内置函数，并且说说如何使用内置函数作正则匹配](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1634560/20241106/3c985adba7754028bad691222250b227.jpeg?x-oss-process=image/resize,h_160,m_lfit)
