防抖动函数

本文探讨了两种JavaScript防抖动技术的实现方式。第一种方法通过设置定时器延迟执行函数,但无法立即触发。第二种方法利用时间戳判断触发间隔,超过指定延迟后执行函数。这两种方法对于优化频繁触发的事件处理函数非常有用,如窗口滚动或输入监听。

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

下面是网上学来的方法

    // 防抖动1 

    debounce(func, wait) {

      const context = this

      const args = arguments

      if (this.debounceTimeout) clearTimeout(this.debounceTimeout)

      this.debounceTimeout = setTimeout(() => {

        func.apply(context, args)

      }, wait)

    }

实际使用会发现,他不能直接立即触发函数,还要等wait的延迟。

 

下面是自己琢磨的方法,单纯的使用计时来控制函数的触发

// 防抖动2

// startTime默认为null。

首次触发 直接执行函数 并为startTime赋值。

再次触发进入else,计算触发间隔,超过wait时间则执行函数,并更新startTime。

未超过则return。

    debounce(func, wait) {

      if (!this.startTime) {

        this.startTime = Date.now()

        console.log('执行函数')  // func.apply(context, args)

      } else {

        this.endTime = Date.now()

        if (this.endTime - this.startTime > wait) {

          console.log('执行函数)  // func.apply(context, args)

          this.startTime = Date.now()

          this.endTime = null

        } else {

          return

        }

      }

    }

### 防抖动事件的实现与应用 #### 实现原理 防抖(Debounce)是一种通过设定延迟时间来限制函数执行的技术。其核心在于,当某事件被触发时,不会立即执行绑定的回调函数,而是等待指定的一段时间后再执行;如果在这段时间内事件再次被触发,则重新计时并推迟执行。这种机制能够有效减少因高频事件引发的性能开销。 以下是基于 JavaScript 的防抖函数实现方式: ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; } ``` 此代码片段定义了一个通用的 `debounce` 函数[^3]。它接收两个参数:目标函数 `func` 和延迟时间 `wait`(单位为毫秒)。每当事件触发时,都会清除之前的定时器,并设置一个新的定时器,在经过指定的时间间隔后执行目标函数。 --- #### 应用场景 防抖技术广泛应用于各种需要降低高频率操作影响的场景中,主要包括以下几个方面: 1. **搜索框输入联想** 用户在搜索框中输入文字时,通常会伴随大量的键盘事件触发。如果不加以控制,每次按键都将发起一次网络请求或复杂计算,这不仅浪费资源还可能导致界面卡顿。利用防抖技术,可以在用户停止输入一段时间之后再发送请求,从而显著提升效率。 2. **页面滚动加载更多** 当用户向下滚动网页至底部时,可能希望动态加载新内容。然而,滚动事件本身非常频繁,直接绑定加载逻辑会造成大量无意义的操作。借助防抖方法,可以确保仅在用户完全停下滚动动作后的特定时刻才启动新的数据获取流程[^3]。 3. **窗口大小调整监听** 调整浏览器窗口尺寸同样会产生密集的 resize 事件通知。为了防止这些事件过度消耗 CPU 时间片,可以通过防抖手段延缓响应速度,使得最终效果既满足需求又兼顾性能表现[^1]。 --- #### 使用示例 下面展示了一种实际运用防抖技巧的例子——监控表单字段变化情况: ```html <input type="text" id="searchBox"> <script> const searchBox = document.getElementById('searchBox'); // 定义查询接口模拟函数 function performSearch(query) { console.log(`Searching for "${query}"`); } // 创建带防抖特性的处理器 const handleInputChange = debounce((event) => { const query = event.target.value.trim(); if (query.length > 0) { performSearch(query); } }, 500); // 绑定到 input 事件上 searchBox.addEventListener('input', handleInputChange); </script> ``` 在此案例里,我们为文本框绑定了一个经由 `debounce` 封装过的事件监听程序。这样即使用户快速敲击多个字符也不会立刻触发展示行为,而要等到他们暂停打字至少半秒钟才行[^3]。 --- ### 总结 综上所述,JavaScript 中的防抖功能是一项极其重要的工具,可以帮助开发者应对那些容易引起系统负担过高或者用户体验下降的情况。无论是针对实时交互还是异步通信环节,合理采用此类优化措施都能带来明显的改善作用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值