闭包实现函数防抖节流

闭包函数的典型应用就是防抖节流函数

闭包

红宝书(p178)上对于闭包的定义：

闭包是指有权访问另外一个函数作用域中的变量的函数

关键在于下面两点：

• 是一个函数
• 能访问另外一个函数作用域中的变量

function a () {
  let i = 0;
  console.log(i);
  function b () {
    i++;
    console.log(i);
  }
  return b;
}

let fb = a();
fb();

我的理解：

在上面例子中函数b就是一个闭包函数，在执行let fb = a();时将函数a的返回值（即函数b）赋值给外部，每次执行fb()时都是在执行函数b，因为函数b属于外界所以在函数a执行完b中引到的变量i在在被引用不能进行变量i的垃圾回收，变量i得以保存。此时变量i仍在外部的作用域链上。

函数防抖

原理：

函数防抖是指在函数被高频触发时当停止触发后延时n秒再执行函数（即每次触发都清理延时函数再次开始计时），一般用于resize，scroll，mousemove等

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

函数节流

原理：

函数被高频触发时延时n秒后才会再次执行。

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

参考文档

https://blog.csdn.net/l598465252/article/details/85797497
https://github.com/mqyqingfeng/Blog/issues/22
https://github.com/mqyqingfeng/Blog/issues/26
https://juejin.im/post/5bfe8fc5e51d4514e0515b90