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

2021年09月15日 阅读数:1
这篇文章主要向大家介绍debounce防抖函数减小函数调用的逻辑分析(包裹上时间的外衣,在时间还没来时,kill),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

1,什么是debounce防抖函数:函数

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

2,debounce的代码:spa

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

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

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

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

4,防抖函数使用场景:io

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

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

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