本帖最后由 荼泱 于 2024-11-4 19:34 编辑
防抖和节流模块
防抖函数(debounce)和节流(Throttle)是在工作中的日常使用经常出现,用于控制事件触发的频率,提升性能和用户体验。
这两个函数的目的是一致的:防止某个时间段内不断地触发某个事件,或防止不断地发送请求,造成性能消耗。
防抖(Debounce): 防抖是一种技术,通过延迟执行函数来控制事件在短时间内连续触发时的执行次数,使得只有等待一定的间隔时间后,事件最后一次触发后的操作才会执行。简而言之,当事件持续触发时,防抖会等待一段时间后,执行最后一次触发的操作。
应用场景:
- 处理搜索框的输入事件,避免每次输入都发送请求,而是等待用户输入完毕后再发送请求。
- 处理窗口调整事件,避免频繁的重新渲染页面布局。
- 处理按钮点击事件,避免用户误操作导致重复的请求或页面跳转。
- 处理滚动事件,限制频繁触发的情况,例如在滚动加载场景中,只有在用户停止滚动一段时间后才加载内容。
- 处理鼠标移动事件,避免频繁触发事件处理函数,尤其对于一些消耗性能较大的操作,可以控制处理的频率。
节流(Throttle): 节流是一种技术,通过控制在一定的时间间隔内只执行一次函数,来限制事件的触发次数。它确保在一个时间段内,事件处理函数被执行的最大频率为指定的间隔时间。
程序场景
我为大家写了一个简单的demo模仿了几个简单的场景
这里主要展示了获取用户的输入状态,和避免一些重复的事件
|