• 闭包的理解

    1.什么是闭包？

    变量的私有化。一个函数内的变量,随着函数的执行完毕,对于的变量也会随着销毁,闭包可以让变量在函数执行完毕之后不必销毁,通常将这个变量通过匿名函数的形式return出去,这个变量只能被访问,不能被修改。

    2.证明变量执行玩被销毁

    (1)函数体没有被包裹之前的打印

    1.     function fn() {
    2.       var a = 10;
    3.       return a++
    4.     }
    5.     console.log(fn());
    6.     console.log(fn());
    7.     console.log(fn());

    打印的结果:

    (2)函数体被包裹之后的打印

    可以看出a变量每次都递增了1,从这个结论来看也可以说明a变量是没有被销毁的。

    (3)解释不销毁的原因

    return出去一个函数体,这个函数体需要一直访问fn函数,因此a变量不会被销毁,从而实现了递增的效果,因此闭包也被称为变量的私有化。

    3.闭包的案例

    (1)防抖

    持续触发不执行,一段时间不触发之后开始执行。

    (2)节流的案例

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.   head>
    8.   <body>
    9.     <button id="aa">防抖button>
    10.   body>
    11.   <script>
    12.     let btn = document.getElementById("aa");
    13.     var timer;
    14.     btn.addEventListener("click", function () {
    15.       clearInterval(timer);
    16.       timer = setInterval(() => {
    17.         console.log(123);
    18.       }, 2000);
    19.     });
    20.   script>
    21. html>

    这是一个简单的防抖案例。

    (3)思路

    我们在写代码之前的第一肯定是想到的是,添加点击事情,然后就是定时器任务,和清除定时器。

    清除定时器的应该放在开始定时器的前面。这样在连续点击的时候每次点击就会清掉上一次的定时器

    (4)定时器名字的选择

      代码:

    1.    let btn = document.getElementById("aa");
    2.  
    3.     btn.addEventListener("click", function () {
    4.       clearInterval(timer);
    5.       let  timer = setInterval(() => {
    6.         console.log(123);
    7.       }, 2000);
    8.     });

    因为let 不会存在变量提升在函数里面定义了,我们要做的第一步就是清除定时器,没有定时器写清除定时器的代码当然会报错, 改成var会怎么样？var 在函数里面会存在变量提升的问题。

    1.  var tiemr;
    2.  clearInterval(timer);

    这样代码还没开始,定时器就被清掉了,代码执行的结果:

    (5)定时器名字的敲定

    因此这个定时器的名字应该放在函数的外面

    (6)代码的封装

    1. const debounce = (fn, time) => {
    2.             let timer = null
    3.             return function (...args) {
    4.                 clearTimeout(timer)
    5.                 // this => oDiv
    6.                 timer = setTimeout(() => {
    7.                     // 干啥！
    8.                     fn.apply(this, args) // 调用的时候传递才是实参，window.fn()
    9.                 }, time)
    10.             }
    11.         }

  • 相关阅读:
    连接Mumu模拟器使用ADB
    聊一聊redis奇葩数据类型与集群知识
    我用GPT4 预测了10年后中国大学排名Top10
    热敏性聚N-乙烯基异丁酰胺(PNVIBA)/聚(N—乙烯基异丁酰胺)接枝聚苯乙烯微球的研究
    生命形式问题
    ReentrantLock替换synchronized解决多线程并发死锁，Java
    #分支语句详解
    java jiraClient 针对某个issue增加评论
    Redis小结
    ~2 ccf 2022-03-1 未初始化警告
  • 原文地址：https://blog.csdn.net/qq_59076775/article/details/132850516