防抖函数延伸的知识

上代码，看例子

function debounce(fn, wait = 50) {
    // 通过闭包缓存一个定时器 id
    let timer = null
    // 将 debounce 处理结果当作函数返回
    return function(...args) {
        if (timer) clearTimeout(timer)
        // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
        timer = setTimeout(() = >{
            fn.apply(this, args)
        },
        wait)
    }
}
const betterFn = debounce(() = >console.log('fn 防抖执行了'), 1000)
document.addEventListener('scroll', betterFn)

包含的知识点，apply，argument，剩余函数

apply 知识点：call 和apply的作用与区别__陌默-CSDN博客_call和apply

argument知识点：js的arguments到底是什么？_自然醒-CSDN博客_arguments js

ES6函数剩余参数（Rest Parameters）

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数

这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：...

1 2 3 4 5 6

function func(a, ...rest) {   console.log(a)   console.log(rest) } func(1) func(1, 2, 3, 4)

注意func的第二个参数rest，前面有三个点。定义好后调用了两次，结果分别如下

可以看到第一次调用时，rest为一个空数组，第二次为[2, 3, 4]。

又比如，在前面定义2个参数

1 2 3 4 5 6

function func(a, b, ...rest) {   console.log(a, b)   console.log(rest) } func(1, 2) func(1, 2, 3, 4)

输出结果如下