debounce防抖函数减少函数调用的逻辑分析(包裹上时间的外衣,在时间还没来时,kill)

简介: debounce防抖函数减少函数调用的逻辑分析(包裹上时间的外衣,在时间还没来时,kill)

debounce防抖函数减少函数调用的逻辑分析


1,什么是debounce防抖函数:

  • 当调用同一动作在n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

2,debounce的代码:

debounce(func, delay) {
        let timer = null
        return function (...args) {        //这一层函数的封装返回,是为了下一个原函数到来,可以拿到上一个原函数
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => {
            func.apply(this, args)
          }, delay)
        }
      }


3,分析:(包裹上时间的外衣,在时间还没来时,kill)

从代码逻辑看,第一个原函数到来,在某个时间后才执行的原函数,先将原函数通过setTimeout封装起来保存到变量timer,

但是在下一个原函数的到来时,清除掉timer(即上一个通过时间的外衣包裹着的原生函数),然后又给它包裹上一层时间的外衣。

4,防抖函数使用场景:

(1)懒加载、滚动加载、加载更多或监听滚动条位置;

(2)搜索框输入,搜索联想功能;

(3)表单提交,防止表单重复提交;

目录
相关文章
节流函数和防抖函数的区别和应用
节流函数和防抖函数的区别和应用
41 0
|
前端开发
封装防抖函数和节流函数
封装防抖函数和节流函数
77 0
|
20天前
|
前端开发
防抖和节流的区别,实现和用处。
防抖和节流是优化高频事件处理的两种技术。防抖确保在一系列连续事件后仅执行最后一次操作,如搜索输入完成后再发送请求;节流则保证在设定时间内仅执行一次操作,适用于滚动加载等场景。两者通过限制回调函数的执行频率,有效提升前端性能。示例代码展示了如何实现这两种技术。
31 2
|
2月前
|
前端开发 JavaScript UED
什么是防抖和节流?有什么区别?如何实现?
防抖和节流是前端优化技术,用于限制函数的执行频率。防抖是在一段时间内只执行一次函数,常用于搜索输入、窗口调整等场景;节流是在固定时间间隔内执行函数,适用于滚动事件、鼠标移动等。实现方式通常使用定时器。
|
3月前
|
前端开发 JavaScript UED
debounce(防抖)和 throttle(节流)是两种非常实用的技术,它们可以帮助我们有效地控制函数的执行频率,提高应用的性能和用户体验。
【9月更文挑战第1天】在前端开发中,频繁的用户操作可能导致性能问题。为此,debounce(防抖)和 throttle(节流)技术应运而生,有效控制函数执行频率,提升应用性能和用户体验。debounce 原理是在一定时间内仅执行最后一次事件,减少不必要的计算;throttle 则确保函数按固定频率执行,保证基本响应速度。二者广泛应用于搜索实时反馈、滚动事件处理等场景,可通过原生 JavaScript 或第三方库如 Lodash 实现。正确使用可显著改善应用性能。
54 8
|
5月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
1088 0
|
7月前
|
算法
还不会防抖和节流?看这篇就足够了
还不会防抖和节流?看这篇就足够了
|
7月前
|
数据库连接 Go 开发者
避免defer陷阱:拆解延迟语句,掌握正确使用方法
避免defer陷阱:拆解延迟语句,掌握正确使用方法
|
监控 程序员 C++
[虚幻引擎] UE里面监控每帧循环里面 C++ 函数的性能,监控函数效率,函数执行时间。
在使用C++开发UE引擎,有时候需要监控函数的执行的执行效率,这个时候有两种方式可以使用。
203 0
|
JavaScript 前端开发
【高频触发事件优化】封装节流和防抖
【高频触发事件优化】封装节流和防抖
172 0