JavaScript 手写防抖节流以及应用演示,点赞加关注持续更新~

本文详细介绍了防抖(debounce)和节流(throttle)的概念、应用场景、实现思路,以及如何通过手写代码和Lodash库来应用它们以提升代码性能。特别关注了输入框搜索和窗口调整等常见使用场景。

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

防抖的应用演示,持续的事件触发停止时,执行最后一次

节流的应用演示,持续的事件触发,每隔一段相同的事件触发一次


持续的事件触发停止时,执行最后一次
持续的事件触发,每隔一段相同的事件触发一次

防抖和节流的演示代码已上传至Incode,可以直接从文章顶部去运行

防抖节流

  • 防抖(debounce)和节流(throttle)都是性能优化的手段,减少资源消耗,提高代码性能
  • 防抖其实就是当事件持续触发的时候,只执行事件停止触发后的最后一次事件
  • 节流与防抖类似,节流是当事件持续触发的时候,每隔相同的一段事间触发一次

防抖(debounce

在同一时间内,连续触发事件,只处理最后一次,这样可以减少计算机算力的消耗,优化性能

防抖的主要应用场景:

  1. 输入框实时搜索:当用户在输入框中输入时,你可能希望只有在用户停止输入一段时间后再执行搜索,而不是每次用户键入字符就执行搜索,这样可以减少不必要的计算和网络请求。
  2. 窗口调整事件:当用户调整窗口大小时,你可能希望只有在窗口大小停止变化后的一段时间内重新计算布局,而不是每次窗口大小发生变化就重新计算,这样可以提高性能。

实现思路:

  • 当事件发生,不立即执行事件回调。用定时器定个时间,在事件停止触发后一段时间后才去触发(延迟触发事件)
  • 再次触发事件,先取消上次的定时器,再重新开启一个定时器(重新刷新定时器的时间)

创建一个防抖函数debounce

 // 创建一个防抖函数
    function debounce(fn, time) {
   
   
      let setId // 定义一个计时器变量,接收定时器,可以用来清楚定时器
      return function () {
   
   
        clearTimeout(setId) // 如果在规定时间内再次输入,则清除上一次计时器
        setId = setTimeout(function () {
   
   
          fn()  // 等待规定时间后执行函数
        }, time)
      }
    }

防抖函数创建完成,接下来就是来个简单的演示,完整代码如下

 <styl
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十七同志

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值