【JS基础】闭包、防抖、节流

闭包

闭包到底是什么？

闭包是一种引用关系，该引用关系存在于内部函数中，内部函数引用的是外部函数变量的关系。

闭包产生的条件

1. 函数嵌套
2. 内部函数引用了外部函数的变量
3. 调用外部函数（执行）

    function closure(){         // 外部函数
        var a = 10;             // 外部函数变量
        return function(){      // 1.内部函数嵌套于外部函数;
        console.log(a);         // 2.内部函数引用了外部函数的变量
    }}
    closure();                  // 3.调用外部函数执行

常见的闭包

1. 将函数作为另一个函数的返回值return
2. 将函数作为实参给另一个函数的调用
3. 使用闭包实现私有方法操作独立的私有属性

闭包的作用

1. 延长外部函数变量的生命周期。
2. 让函数可以操作函数内部的数据，通过闭包间接操作。避免全局变量污染。
3. 注意浏览器为了性能将外部函数不被内部函数使用的变量清除

闭包的生命周期

1. 产生：在嵌套内部函数定义时就产生了，外部函数调用
2. 死亡：在嵌套的内部函数成为垃圾对象。

闭包的缺点和解决

内存泄漏：内存无法释放

内存移除：内存被撑爆

解决方法：f=null 让闭包机制清除，必须删除外部函数调用时定义的那个对应内部函数，即将闭包产生条件的第三点中清除。

防抖debounce

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

如何理解防抖？

防抖比作乘坐电梯，门外有人按键电梯门就需要重新开启。等待门外不再有人后，电梯门就关闭并运行。

防抖函数的核心代码

// 防抖函数(代码实现重在清零 clearTimeout 重新计算时间。)
function debounce(fn, delay) {
  let timer;
  
  return function () {
    let _this = this;
    let args = arguments;
    
    if (timer) {
      clearTimeout(timer);
    }
    
    timer = setTimeout(function () {
      fn.apply(_this, args);
    }, delay);
  };
}

// 视窗resize调整大小
window.onresize = debounce(function () {
  console.log("resize");
}, 1000);

防抖函数的常见业务场景

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存

节流throttle

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

如何理解节流？

单位时间内事件只能触发一次。节流可以比作红绿灯，每等一段间隔可以通行一批，以此控制流量。

节流函数的核心代码

// 一、定时器实现（代码实现重在开锁关锁控制流量 timer=setTimeout; timer=null）
function thorttle(fn, delay) {
  let timer;
  
  return function () {
    let _this = this;
    let args = arguments;

    if (!timer) {
      timer = setTimeout(function () {
        timer = null;
        fn.apply(_this, args);
      }, delay);
    }
  };
}

// 二、时间戳实现
function throttle(fn, delay) {
  let time = 0;
  
  return function () {
    let _this = this;
    let args = arguments;
    
    let now = Date.now();
    
    if (now - time > delay) {
      fn.apply(_this, args);
      time = now;
    }
  };
}

节流函数的常见业务场景

1. 滚动scroll 事件，设置时间间隔计算一次位置信息等
2. 浏览器视频播放事件，设置时间间隔记录播放进度等
3. input 框实时联想搜索并发送请求展示下拉列表，设置时间间隔发送一次请求 (也可做防抖)

实际开发中，直接引入lodash包封装好的防抖节流函数

import throttle from 'lodash/throttle'
import debounce from 'lodash/debounce'