防抖/节流 总结

1.什么是防抖/节流

防抖（debounce）和节流（throttle）是前端开发中常用的两种性能优化技术。

防抖是指在一定时间内，多次触发同一个事件，只执行最后一次操作。

节流是指在一定时间内，多次触发同一个事件，只执行第一次操作。

总的来说，防抖和节流都是通过使用定时器来延迟或限制事件的执行，以达到优化性能的目的。

2.为什么要用防抖/节流

我们使用防抖和节流的原因主要有以下几点：

2.1减少事件触发频率：在某些情况下，例如滚动、输入等，事件会频繁触发，这会增加服务器的负载和浏览器的负担。使用防抖和节流可以减少事件的触发频率，从而降低服务器和浏览器的资源消耗。
2.2提高用户体验：频繁的事件触发会导致页面卡顿或延迟，影响用户体验。使用防抖和节流可以控制事件触发的频率，避免频繁的操作，从而提高用户体验。
2.3避免内存泄漏：如果事件处理程序中存在循环或长时间运行的操作，可能会导致内存泄漏。使用防抖和节流可以避免这种情况的发生，从而避免内存泄漏的问题。
总的来说，防抖和节流可以帮助我们优化性能、提高用户体验，并避免一些常见的性能问题。

3.防抖/节流使用场景

3.1防抖

1.用户输入：当用户在输入框中频繁输入内容时，可以使用防抖来合并多次输入操作，避免频繁发送请求到服务器。例如，在搜索框中，当用户输入关键词时，可以通过防抖来合并多次输入操作，只在用户停止输入一段时间后发送搜索请求。
2.网络请求和数据处理：当需要频繁发送网络请求或处理大量数据时，可以使用防抖来合并多次请求或数据处理操作。例如，在发送 AJAX 请求时，可以使用防抖来合并多次请求操作，避免频繁发送相同的请求。

3.2节流

1.点击事件和动画：当用户频繁点击按钮或触发动画时，可以使用防抖来减少多次点击或动画的执行次数。例如，在点击按钮时，可以使用防抖来合并多次点击操作，避免重复执行相同的操作。
2.窗口调整和滚动：当用户调整浏览器窗口大小或滚动页面时，可以使用节流来限制事件触发的频率。例如，在监听滚动事件时，可以使用节流来限制滚动距离的计算次数，提高页面性能和响应速度。
3.监听键盘事件：当用户持续按键时，可以使用节流来限制事件触发的频率。例如，在监听键盘事件时，可以使用节流来限制键盘事件的触发次数，避免过度执行操作。

4.防抖/节流总结

防抖是:最后一个人说了算
节流是:第一个人说了算
这个总结参考文章:

https://blog.csdn.net/txfyteen/article/details/104457688

5.常用方案(vue相关)

1.通过 disbaled按钮或者加loading等方式实现同等效果
2.在项目中使用自定义指令
3.使用debounce函数
4.最终解决方案lodash(推荐!!!)
具体实现参考下面文章:
https://blog.csdn.net/qq_44376306/article/details/126182694