易的【防抖和节流】模块

荼泱

防抖和节流模块

防抖函数（debounce）和节流（Throttle）是在工作中的日常使用经常出现，用于控制事件触发的频率，提升性能和用户体验。

这两个函数的目的是一致的：防止某个时间段内不断地触发某个事件，或防止不断地发送请求，造成性能消耗。

防抖（Debounce）： 防抖是一种技术，通过延迟执行函数来控制事件在短时间内连续触发时的执行次数，使得只有等待一定的间隔时间后，事件最后一次触发后的操作才会执行。简而言之，当事件持续触发时，防抖会等待一段时间后，执行最后一次触发的操作。

应用场景：

• 处理搜索框的输入事件，避免每次输入都发送请求，而是等待用户输入完毕后再发送请求。
• 处理窗口调整事件，避免频繁的重新渲染页面布局。
• 处理按钮点击事件，避免用户误操作导致重复的请求或页面跳转。
• 处理滚动事件，限制频繁触发的情况，例如在滚动加载场景中，只有在用户停止滚动一段时间后才加载内容。
• 处理鼠标移动事件，避免频繁触发事件处理函数，尤其对于一些消耗性能较大的操作，可以控制处理的频率。

节流（Throttle）： 节流是一种技术，通过控制在一定的时间间隔内只执行一次函数，来限制事件的触发次数。它确保在一个时间段内，事件处理函数被执行的最大频率为指定的间隔时间。

程序场景

我为大家写了一个简单的demo模仿了几个简单的场景

这里主要展示了获取用户的输入状态，和避免一些重复的事件

• 防抖和节流函数的主要区别是什么？

  防抖函数（debounce）和节流函数（throttle）都是用于控制事件触发频率的优化技术，它们在实现方式和效果上有一些区别：

  1. 执行时机：
  • 防抖函数：在事件连续触发后的一个等待时间间隔后执行最后一次触发的操作。
  • 节流函数：在事件触发后的一个等待时间间隔内最多执行一次事件处理函数。

  触发次数：

  • 防抖函数：只在事件连续触发之后的等待时间间隔结束时执行一次。
  • 节流函数：在指定的时间间隔内，最多只执行一次事件处理函数。

  应用场景：

  • 防抖函数：适用于需要等待事件稳定后才执行操作的场景，例如搜索框的输入事件、窗口调整事件等。
  • 节流函数：适用于需要限制事件处理函数的执行频率，保持一定的执行稳定性的场景，例如滚动事件、拖拽事件等。

  行为特点：

  • 防抖函数：会等待一段时间，如果在这段时间内再次触发了事件，计时器会被重置，只有在时间间隔内没有新的事件触发时，才执行事件处理函数。
  • 节流函数：在指定的时间间隔内，无论事件触发多少次，只有一次事件处理函数执行。

游客，如果您要查看本帖隐藏内容请回复

宇Y杰

节流函数：在指定的时间间隔内，无论事件触发多少次，只有一次事件处理函数执行。

fooker

感谢分享，很给力！~

cqsyda

感谢分享，很给力！~

紫夜哟

感谢大佬分享~

枫眼

6666666666666666666

webmaster999

        感谢分享，很给力！~

2966457373

        感谢分享，很给力！~

a3322

这个厉害呀大佬      

lian1223

学无止境，看看