防抖函数

习题链接

防抖函数

课程列表

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

关键点

  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);
        }
    }
    

原文地址:https://www.cnblogs.com/DnmyCourage/p/17454824.html