你知道防抖和节流与闭包的关系吗？

柒丶月

已于 2022-08-13 10:39:15 修改

阅读量637

点赞数 2

分类专栏：前端学习笔记文章标签： javascript 开发语言 ecmascript 闭包防抖

于 2022-08-13 10:37:36 首次发布

本文链接：https://blog.csdn.net/lin1072368472/article/details/126316257

版权

前端学习笔记专栏收录该内容

50 篇文章 2 订阅

订阅专栏

手撕防抖节流

前言

每日一篇快乐每一天

笔者最近发现啊，虽然平时说防抖和节流都知道是什么作用，但是突然让你手写，我的脑子就是…,然后默默的打开百度，平时手写一些代码还是很有必要的。所以今天就来彻底把防抖和节流扒个精光.（怎么感觉有点变态…[痴汉脸]）

在这里插入图片描述

防抖

率先登场是我们的帅小伙防抖小哥，那么`防抖小哥有什么能力呢？

防抖：让事件在触发后N秒后执行，如果在N秒内重新触发，则重新计算时间。

有什么应用场景？

按钮双击，我们平时电脑上快速双击就有可能触发两次点击事件
输入框的input或者change时间
轮动条

等等应用的场景很多，那么我们接下来我们就来手撕

首先防抖小哥可以有两个版本分比为：立即执行版和非立即执行版

非立即执行版：主要原理就是再次触发方法的时候把上次的计时器清除掉

    // 简单版，实现了防抖的功能，无法传参
    // 其实防抖和节流都是闭包 后面再讨论
    function debounce(func, time = 2000) {
        // 第一次执行 timer =null
        let timer = null;
        // 这里为什么声明一个timer？  因为debounce返回了一个函数，而函数内部访问了timer这个变量,这样会导致timer不会被回收
        // 这也是使得第二次执行的时候为什么timer不会再次为null
        return function () {
            // 第一次执行肯定为null所以进入
            if (!timer) { 
                // timer此时不为空了
                timer = setTimeout(() => {
                    func(); // 执行外部传来的函数
                    timer = null; // 再次把timer设为null 使得函数可以再次执行
                }, time)
            }
        }
    }

立即执行版防抖：个人认为立即执行版防抖与节流类似了，所以说立即执行版防抖其实没有必要（这里就不再详细注释了）

    // 简单版防抖函数，添加立即执行，当immediate为true的时候执行
    function debounce(func, time = 2000, immediate = true) {
        let timer = null;
        return function () {
            if (!timer) { // 如果再次触发则清空.
                timer = setTimeout(() => {
                    !immediate && func();
                    timer = null;
                }, time)
                immediate && func()
            }
        }
    }

那么我们平时在使用中的防抖函数肯定不会这么简单，还得传参和绑定this，其实也是很简单把原本的调用方法的方式转换一个换用apply

最终版防抖函数

    // 最终版，实现了防抖的功能，无法传参
    // 其实防抖和节流都是闭包 后面再讨论
    function debounce(func, time = 2000) {
        // 第一次执行 timer =null
        let timer = null;
        // 这里为什么声明一个timer？  因为debounce返回了一个函数，而函数内部访问了timer这个变量,这样会导致timer不会被回收
        // 这也是使得第二次执行的时候为什么timer不会再次为null
        return function (...args) { // 传参
            // 第一次执行肯定为null所以进入
            if (!timer) {
                // timer此时不为空了
                timer = setTimeout(() => {
                    func.apply(this, args) // 执行外部传来的函数
                    timer = null; // 再次把timer设为null 使得函数可以再次执行
                }, time)
            }
        }
    }

节流

节流：在规范时间内，只能触发一次函数，如果多次触发不会执行。

如果弄懂了防抖的话其实节流也差不多，只是计算的方式不同而已，

节流在防抖的基础上：多判断了一个条件，第二次触发的时候，如果在规定的时间内，则什么也不执行.

最终版

    // 简单版，节流其实就比防抖多了一步
    function throttle(func, time) {
        let timer = null;
        return function (...args) {
            if (timer) {// 第二次触发的时候，
                //节流：如果还在规定的时间内，则什么也不执行
                //防抖： 重新计时
                return;
            }
            timer = setInterval(() => {
                timeout = null;
                func.apply(this, args)
            }, time)
        }
    }