防抖与节流 (场景、函数封装)

本文详细探讨了前端开发中常见的性能优化技巧——防抖和节流。针对输入框实时查询的场景,阐述了防抖技术如何避免频繁请求,确保在用户停止输入后才执行查询操作。同时,对于scroll、resize、touchmove等高频触发事件,介绍了节流技术如何限制执行次数,降低资源消耗。通过实例代码展示了防抖和节流优化前后的效果,以提高用户体验。

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

防抖

场景:输入框实时查询

第一次输入触发事件时,开始计时:(比如计时500ms)

  • 计时500ms到了,执行第一次触发的查询
  • 如果计时500ms还没有到,第二次事件又触发了,则清除第一次的计时,重新计时,如果计时500ms到了,执行查询,如果未到第三次事件又触发了,则又重新计时…(用户触发事件过于频繁,只执行最后一次)

比喻:一条公路上规定时间内只允许通过一辆车

  • 如果在规定的时间内,第一辆车跑完了,就去领奖
  • 如果这辆车到时间了还没跑完,就扔下去,第二辆车上路,重新计时…
<input type="text" id="input">
未经过防抖之前js代码:
let iptDom = document.getElementById("input")
iptDom.oninput = function(){
   
    console.log(this.value)
     //拿到输入框的值,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值