防抖函数

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-02

9.防抖函数2023-06-03

10.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

防抖函数

任务

当一个函数在一定时间内被连续调用多次时，只执行最后一次调用，并在最后一次调用后延迟一定时间再执行。

关键点

1. setTime()定时器
   1. 创建一个变量来存储定时器
   2. 每次执行函数的时候，都要先清除上一次的定时器，以达到只执行最后一次调用
   3. 闭包的概念，因为每一次执行函数的时候，才能清除上一次的定时器
   4. 在定时器中执行回调函数fn
2. call()修改this指向，保持上下文不变
   1. 在执行回调函数的时候，要修改this指向
   2. 没有正确的this指向，在外部指向返回的函数的时候很可能会报错，因为没有正确的上下文直接报undefined
   3. 修改为fn.call(this,arguments);

代码实现 && 完整的代码

1. 完整code

   function debounce(fn, delay = 0) {
       // TODO: 在这里写入具体的实现逻辑
       // 返回一个新的防抖函数
       // 即使函数在 delay 时间段内多次被调用，也只会在最后一次函数被调用的 delay 时间结束后执行
       let timer = null;      // 创建一个变量存储定时器
       return function () {
           clearTimeout(timer);      // 清除上一次的定时器
           timer = setTimeout(()=>{  // 给变量赋值
               fn.call(this,...arguments) // 等待delay时间，执行fn函数，并且修改当前的this指向，
           },delay);
       }
   }
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17454824.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！