一分钟写出完美的防抖函数

20 阅读1分钟
function debounce(f,await){
    let timmer = null
    return function(...args){  // 使用...表示剩下的非声明的参数,则args就是一个参数列表(数组)
        // 使用非箭头函数,避免this指向该函数被调用的上级作用域
        let _this = this // 保存当前函数被调用的作用域
        if(!timmer){
            timmer = setTimeout(()=>{
             // 箭头函数的this指向定义时所在的外层第一个普通函数,跟使用位置没有关系
            // 被继承的普通函数的this指向改变,箭头函数的this指向会跟着改变
                // setTimeout使用箭头函数,避免setTimeout中的this指向winwow对象
                // apply 是接受一个参数列表
                // call是接受每一个参数,需要所有的参数都按顺序传入
                f.apply(_this,args); // 使用applay,避免当前作用域的this丢失。
                f(args) // 如果f是箭头函数,则给箭头函数绑定this是没有意义的。。。。
                // 如果用f().则this会指向setTimout中的this.
                clearTimeout(timmer) // 已经执行,则取消防抖锁
            })
        }
    }
}

以下是定义一个变长参数的函数的方式。

image.png