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)表单提交,防止表单重复提交;

目录
相关文章
|
1月前
|
编译器 C语言
成功解决“函数用于调用的参数太少/太多”问题
成功解决“函数用于调用的参数太少/太多”问题
79 0
|
1月前
|
JavaScript UED
常见的触发函数的事件(实现不同的用户体验)
常见的触发函数的事件(实现不同的用户体验)
24 0
|
7月前
节流函数和防抖函数的区别和应用
节流函数和防抖函数的区别和应用
23 0
|
8月前
|
前端开发
封装防抖函数和节流函数
封装防抖函数和节流函数
42 0
|
1月前
|
算法
还不会防抖和节流?看这篇就足够了
还不会防抖和节流?看这篇就足够了
|
1月前
|
存储 编译器 C++
【函数栈帧解析:代码的迷人堆积和无限嵌套】(下)
【函数栈帧解析:代码的迷人堆积和无限嵌套】
|
1月前
|
存储
【函数栈帧解析:代码的迷人堆积和无限嵌套】(上)
【函数栈帧解析:代码的迷人堆积和无限嵌套】
|
1月前
|
JavaScript 前端开发
精准解析 useLayoutEffect 与 useEffect 的执行时机
精准解析 useLayoutEffect 与 useEffect 的执行时机
|
1月前
|
前端开发 JavaScript
setTimeout 函数在前端延迟搜索实现中的作用
setTimeout 函数在前端延迟搜索实现中的作用
30 0
|
1月前
|
数据库连接 Go 开发者
避免defer陷阱:拆解延迟语句,掌握正确使用方法
避免defer陷阱:拆解延迟语句,掌握正确使用方法

热门文章

最新文章