js：防抖、节流（闭包）

1、闭包

什么是闭包？
闭包是打通函数内部、外部的通道，使得外部可以访问函数内部的变量

典型应用：计数器

function Counter() {
    let count = 0;

    return {
        increment: function() {
            count++;
        },
        get: function() {
            return count;
        }
    }
}

var foo = Counter()
foo.increment()	// 1
foo.increment()	// 2
console.log(foo.get())	// 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果不使用闭包的话，可以把count变量声明在函数外部，变成一个全局变量。但是这样容易造成变量污染

2、防抖、节流的区别

都是为了防止函数多次调用，区别在于：
（1）防抖：类似于游戏中的回城，每触发一次，就重新读秒，直到读秒完成，才执行。

应用场景：百度搜索的输入框、词条预览

（2）节流：一段时间内，只有第一次点击会生效，然后开始计时。类似于游戏中的技能cd

应用场景：点击按钮，发起后台请求

（1）防抖

function debounce(fn, delay) { 
    let time;

    return function() {
        if(time) {
            clearTimeout(time)
        }
        time = setTimeout(fn, delay)    // time是已经等待的时间
    }
}
1
2
3
4
5
6
7
8
9
10

（2）节流

function throttle(fn, delay) {
    let first = true;

    return function() {
        if(first) {
            fn()    // 立即执行

            // 从执行成功之后开始计时
            first = false
            setTimeout(()=>{
                first = true
            }, delay)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如何调用？——调的是 闭包

function fn1() {
    console.log('throttle')
}
function fn2() {
    console.log('debounce')
}
let fn_debounce = debounce(fn2, 2000)
let fn_throttle = throttle(fn1, 2000)

// fn_debounce()、fn_throttle()是闭包，将其作为绑定事件
1
2
3
4
5
6
7
8
9
10

<button onclick="fn_debounce()">防抖按钮button>
<button onclick="fn_throttle()">节流按钮button>
1
2

3、内存泄漏

闭包会一直留存在内存中，除非手动清理

fn_debounce = null
fn_throttle = null
1
2