一、是什么
本质上是优化高频率执行代码的一种手段。
防抖和节流都是优化高频率执行代码的手段,用于限制函数的执行频率,提升性能和用户体验。
二、区别
防抖(Debounce) :是指在一段连续的时间内,只执行最后一次操作。当事件被触发后,如果在设定的时间间隔内再次触发该事件,就会重新计时,直到超过设定的时间间隔才会执行函数。防抖常用于处理输入框输入事件,例如在用户输入时,只有在用户停止输入一段时间后才会执行相关操作,避免频繁的请求或操作。
节流(Throttle):是指在一段连续的时间内,只执行一次操作。当事件被触发后,函数会立即执行,并且在设定的时间间隔内,不管事件触发多少次,都不会再次执行函数,直到超过设定的时间间隔才会重新执行。节流常用于处理滚动事件、窗口调整事件等,以减少函数的执行频率。
定义
- 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
- 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
代码实现
防抖:
节流:
将时间戳写法的特性与定时器写法的特性相结合,实现一个更加精确的节流。
组件lodash的用法
npm i -save lodash \\全局安装
import _ from 'lodash' //引入到文件中
{/* _下的debounce为防抖 throttle为节流 (需要执行的函数,间隔时间) */}
<button onClick={_.debounce(currentClick,2000)}>lodash防抖按钮</button>
<button onClick={_.throttle(currentClick,2000)}>lodash节流按钮</button>