vue防抖和节流

防抖策略(debounce)

是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。

作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间。
防抖的应用场景:

登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖

调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖

文本编辑器实时保存,当无任何更改操作一秒后进行保存

节流 (规定时间内 只触发一次)

节流策略(throttle),控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

作用: 高频率触发的事件,在指定的单位时间内,只响应第一次。
节流的应用场景:

鼠标连续不断地触发某事件(如点击),单位时间内只触发一次;监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断。例如:懒加载;

浏览器播放事件,每个一秒计算一次进度信息等

  • 37
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue防抖节流是两种常用的优化方式,用于限制函数被频繁触发的次数。 1. 防抖(Debouncing):在一段时间内,多次触发同一个函数,只执行最后一次触发,可以避免函数过于频繁执行。 防抖常用场景:输入框搜索联想、页面滚动等。 使用方法:可以使用lodash库的`debounce`函数或自定义防抖函数。 实现原理:设置一个定时器,在函数被触发时先清除之前的定时器,然后重新设置定时器,当定时器到达时间后执行函数。 2. 节流(Throttling):在一段时间内,多次触发同一个函数,按照指定的间隔时间执行函数,可以减少函数的执行次数。 节流常用场景:滚动条下拉刷新、窗口resize等。 使用方法:可以使用lodash库的`throttle`函数或自定义节流函数。 实现原理:设置一个定时器,在函数被触发时判断是否已经达到指定的间隔时间,如果是则执行函数并重置定时器,如果未达到则不执行。 防抖节流都可以通过设置时间间隔来调整触发的频率。在vue中,可以将防抖节流函数绑定到事件触发的回调函数上,以实现优化。这些函数在vue的指令(`v-on`)中应用广泛,例如: ``` <input v-model="keyword" v-on:input="debounceSearch"> ``` 在这个例子中,`debounceSearch`函数会在用户输入时触发,但是只有在用户输入停止一段时间后才会执行搜索操作,以避免输入过程中频繁执行搜索的情况发生。 总之,防抖节流vue中常用的函数优化方式,能够有效控制函数执行的频率,提升用户体验和页面性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值