【JavaScript专题】——— 防抖函数debounce，underscore的防抖源码分析

Share_Li_98

已于 2022-08-02 16:35:07 修改

阅读量542

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue

于 2022-08-01 17:27:17 首次发布

本文链接：https://blog.csdn.net/Share_Li_98/article/details/126104195

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

防抖：

防抖大致意思是高频触发的函数，在一定的时间间隔内只会执行一次。主要用来处理窗口的resize，滑动，滚动，输入等高频事件，也可以处理防止恶意高频点击按钮。

1、简易版防抖：

	const d = function(fn, wait){
        let timeout = null
        return function(){
          clearTimeout(timeout)
          let args = arguments
          timeout = setTimeout(() => {
            fn(...args)
          }, wait);
        }
     }

实际工作中很少会手写这些工具代码，一般都会使用lodash或者underscore这些工具库。分析下underscore的防抖代码使用定时器结合时间戳和闭包实现的非常巧妙。

2、手写debounce：

// fn 是需要防抖处理的函数 
// wait 是时间间隔 
function debounce(fn, wait = 50) { 
    // 通过闭包缓存一个定时器 id 
    let timer = null 
    // 将 debounce 处理结果当作函数返回 
    // 触发事件回调时执行这个返回函数 
    return function(...args) { 
        // this保存给context 
        const context = this 
       // 如果已经设定过定时器就清空上一次的定时器 
        if (timer) clearTimeout(timer) 

       // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn 
        timer = setTimeout(() => { 
            fn.apply(context, args) 
        }, wait) 
    } 
} 

// DEMO 
// 执行 debounce 函数返回新函数 
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000) 
// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了') 
document.addEventListener('scroll', betterFn)

3、underscore版防抖：

const _.debounce = function(func, wait, immediate) {
    let timeout, args, context, timestamp, result;

    const later = function() {
        const last = _.now() - timestamp;
        console.log(last)
        if (last < wait && last >= 0) {
            console.log(1)
            timeout = setTimeout(later, wait - last);
        } else {
            console.log(2)
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        const callNow = immediate && !timeout;
        console.log(timeout)
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};

将其简化一下，整体其实就两部分：

const _.debounce = function( func, wait, immediate){

    // 函数的回调部分
    // 当immediate === false时
    // func真正的执行部分
    function later(){};
    
    return function(){
        // 在这里判断func是否立即执行
        // 是否有计时器的存在
    }
}

下面分析返回的匿名函数部分：

return function() {
        context = this;
        args = arguments;
        // 这里调用了underscore封装的调用时间戳的方法
        // 等同于
        // timestamp = Date.now()
        timestamp = _.now();
        const callNow = immediate && !timeout;
        console.log(timeout)
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }
    };

这里我要说的是timestamp，它存储的是动作发生时的时间戳，假设我这里调用debounce时传入的wait为10000，也就是10秒。我第一次调用事件函数是在10:00:00，按照设定，10:00:10之后才能调用第二次方法，在这10秒内，任何调用都是不执行的。

当我第一次执行事件时:

timeout = undefined;
immediate先设置为false

所以：

callNow === false

只有这句话是执行的：

if (!timeout) timeout = setTimeout(later, wait);

那接着来看later都有什么：

var later = function() {
  //     var last = Date.now() - timestamp;
    const last = _.now() - timestamp;
    console.log(last)
    if (last < wait && last >= 0) {
        console.log(1)
        timeout = setTimeout(later, wait - last);
    } else {
        console.log(2)
        timeout = null;
        if (!immediate) {
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        }
    }
};

之前，判断wait内重复输入，我们取消事件的方法是这样的：

if(timer){clearTimeout(timer)}

但在这里，我们是不是都还没看到怎么处理wait时间内，重复输入无效的问题？别急，现在就来说。玄妙都在这个last变量上。

之前说过，timestamp存储的是第一次事件执行时的时间戳（10:00:00），但现在我没想等十秒，过了五秒我就触发了第二次事件。所以timestamp现在的内容就变成新的时间戳了（10:00:05）。但问题是，timer的回调函数至少要到10:00:10之后才会执行，也就是说：