高级JavaScript中的闭包、防抖和节流，到底是怎么样的？

闭包

从语法结构来说 闭包是一种JS特有的函数嵌套结构

行成闭包的三个必要条件：
1. 函数嵌套(至少有两个函数)
2. 内层函数中使用了外层函数的变量或参数
3. 内层函数被返回到外部在外部使用

闭包的作用：
1. 保护具有共享意义的变量
2. 隔离作用域 避免作用域污染
3. 为变量提供对外访问接口

闭包的缺点：
1. 概念复杂 不易理解
2. 占用过多资源(内存) 大量使用不利于代码优化

闭包作用域中的值 不会随垃圾回收机制销毁；销毁闭包的方式是将闭包的函数赋值为null

let func = (function () {
    let a = 10;
    return func2;
    function func2() {
        a++;
        console.log(a);
    }
})();
func(); // 这就是一个简单的闭包

 

防抖

给高频事件降频

事件结束后等待N秒，执行函数；如果在N这个时间范围内 多次触发事件 则从新计时

function debounce(callback, delay) {
    let timer = null; // 用于存放计时器id

    return function () {
        let arg = arguments; // 保存实参

        if (timer) { // 之前如果有开启过计时器(之前有任务)
            clearTimeout(timer); // 关闭计时器
        }

        timer = setTimeout(() => { // 到达时间
            callback.apply(this, arg); // 执行任务
        }, delay);
    }
}

节流

核心思想 每隔N秒执行函数；想要知道间隔时间 就需要记录上一次的执行时间

function thottle(callback, wait) {
    let prev = 0; // 用于记录上次函数的执行时间

    return function () {
        let now = Date.now(); // 获得当前时间

        if (now - prev >= wait) { // 当当前时间-上次执行时间 大于等于 等待时间  说明到点了
            callback.apply(this, arguments); // 执行回调函数
            prev = now; // 更新上一次的执行时间
        }
    }
}