防抖函数(debounce)和节流(Throttle)是在工作中的日常使用经常出现,用于控制事件触发的频率,提升性能和用户体验。
这两个函数的目的是一致的:防止某个时间段内不断地触发某个事件,或防止不断地发送请求,造成性能消耗。
img
防抖(Debounce): 防抖是一种技术,通过延迟执行函数来控制事件在短时间内连续触发时的执行次数,使得只有等待一定的间隔时间后,事件最后一次触发后的操作才会执行。简而言之,当事件持续触发时,防抖会等待一段时间后,执行最后一次触发的操作。
应用场景:
处理搜索框的输入事件,避免每次输入都发送请求,而是等待用户输入完毕后再发送请求。
处理窗口调整事件,避免频繁的重新渲染页面布局。
处理按钮点击事件,避免用户误操作导致重复的请求或页面跳转。
处理滚动事件,限制频繁触发的情况,例如在滚动加载场景中,只有在用户停止滚动一段时间后才加载内容。
处理鼠标移动事件,避免频繁触发事件处理函数,尤其对于一些消耗性能较大的操作,可以控制处理的频率。
节流(Throttle): 节流是一种技术,通过控制在一定的时间间隔内只执行一次函数,来限制事件的触发次数。它确保在一个时间段内,事件处理函数被执行的最大频率为指定的间隔时间。
程序场景
我为大家写了一个简单的demo模仿了几个简单的场景
这里主要展示了获取用户的输入状态,和避免一些重复的事件
防抖和节流函数的主要区别是什么?
防抖函数(debounce)和节流函数(throttle)都是用于控制事件触发频率的优化技术,它们在实现方式和效果上有一些区别:
执行时机:
防抖函数:在事件连续触发后的一个等待时间间隔后执行最后一次触发的操作。
节流函数:在事件触发后的一个等待时间间隔内最多执行一次事件处理函数。
触发次数:
防抖函数:只在事件连续触发之后的等待时间间隔结束时执行一次。
节流函数:在指定的时间间隔内,最多只执行一次事件处理函数。
应用场景:
防抖函数:适用于需要等待事件稳定后才执行操作的场景,例如搜索框的输入事件、窗口调整事件等。
节流函数:适用于需要限制事件处理函数的执行频率,保持一定的执行稳定性的场景,例如滚动事件、拖拽事件等。
行为特点:
防抖函数:会等待一段时间,如果在这段时间内再次触发了事件,计时器会被重置,只有在时间间隔内没有新的事件触发时,才执行事件处理函数。
节流函数:在指定的时间间隔内,无论事件触发多少次,只有一次事件处理函数执行。
评论(0)