防抖和节流的使用方法

防抖和节流是使用定时器来优化性能的技术。防抖在事件触发n秒后执行回调,若期间再次触发则重置计时器。常用于输入框搜索,避免频繁请求。节流则是确保在单位时间内只执行一次函数,适用于鼠标点击、滚动事件等,防止过度执行。文章介绍了两者的定义、使用场景及示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念

防抖节流就是使用定时器 来实现目的。

防抖(debounce):

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

典型的案例就是输入框搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,则重新计时。

节流(throttle):

规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效。

典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只生效一次。

防抖

定义:

频繁操作防止抖动,在操作后 n 秒内不操作,才触发事件,若继续操作,则重新计时

使用场景:

1.输入框输入

2.缩放resize

代码: 

 

 节流

定义:

频繁操作稀释函数执行,频繁操作时,每隔n秒才触发一次

使用场景:

  1. 鼠标点击&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值