作为前端，想必你对防抖（debounce）、节流（throttle）这两个概念不陌生。在React18中，基于新的并发特性，React原生实现了防抖的功能。今天我们来聊聊这是如何实现的。

在监听频繁触发的事件时，一定要多加小心，比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。这些事件总是被频繁触发，可能 几秒一次。如果针对每次事件都发起 fetch 请求（或类似的行为），那显然是不明智的。

最好是从字面意思能够解释两者区别，区分开防抖和节流(因为每次网上查完，过一段时间，又会忘记)；给出经典的，有说服性的demo

用户在输入搜索关键词的时候，每输入一个字都会触发一次input事件，我们不可能每次都获取输入的内容然后向后台发请求拿搜索提示，这对服务器的压力是巨大的。

防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。前端开发中，常见的事件如，onresize，scroll，mousemove ,mousehover

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流：规定在一个单位时间内，只能触发一次函数。

函数防抖的理解:连续触发事件,最后一次事件触发后,超过了规定时间还没有再次触发,这时候会执行一次事件,这就是函数的防抖

面试的时候我们经常会问别人是理解什么是节流和防抖，严格的可能要求你写出节流和防抖函数，这里我们抛开loadsh工具库手写节流和防抖

解决当函数在某些场景下被无限制的频繁调用，会增加浏览器的负担，会造成卡顿的现象;鼠标滚动、键盘输入操作、窗口resize等等,事件持续触发时，如果间隔时间小于预设的时间，不会执行函数，同时以最后触发事件的时间为准重新计时。

应用场景：多次点击提交按钮 首次提交执行，重复提交就会等待一定的时间提交执行;首次点击提交按钮会立即执行一次debounce方法，后面3s内不触发事件才能继续执行

有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在 3 秒内触发数千次，这可能会导致一些严重的性能问题

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。（信我，你看完肯定就懂了）

在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 .

是在写keyup事件的时候，每次触发，都会请求后台接口，为了避免，每次请求，键盘弹起之后，隔上一段时间再去请求，所以用防抖函数，多次事件触发后、事件处理函数只执行一次