从防抖函数中得到的简单几点记录

一段简单的防抖函数

javascript 复制代码

    const btn = document.querySelector('#btn')
    // 设置初始化timer
    

    function debounce(fn,delay) {
        
        let timer = null
        return function(...args){
            
            
            // 如果timer有值，清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn.apply(that,args) 
            }, delay)
        }
    }
    // 每次点击，调用debounce
    btn.addEventListener('click',debounce(function(e) {
        console.log(e);
        console.log(this);//有this
    },1000))

1.闭包在初始化时的调用 timer

less 复制代码

    btn.addEventListener('click',debounce(fn,1000))

此时初始化执行一次debounce()，后续点击事件触发时，执行的是debounce()所返回的函数，所以timer只会在页面加载时初始化一次，后续重新触发debounce()返回的函数时不会重新初始化，这就使得每一次事件都能保留timer的值

2.this的调用

javascript 复制代码

btn.addEventListener('click',debounce(()=>{
console.log(this)//此时是window
},1000))

为什么此时是window呢？因为箭头函数的this由定义时的上下文决定，所以当箭头函数在此时定义时，相当于

javascript 复制代码

const fn = ()=>{console.log(this)}
btn.addEventListener('click',debounce(fn,1000))

这样就能看出来虽然fn被传入了debounce，但是在定义时已经决定了this为window，就算后续fn.apply(that,args) ，也改变不了this的值，所以只能把传入的函数写成普通函数，才能在后续绑定正确的this

3.debonce函数内的fn函数绑定this的问题

javascript 复制代码

    btn.addEventListener('click',debounce(funtion(){
    console.log(this) // 此时this也为window
    },1000))
    
            // 如果timer有值，清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn() //在全局调用,此时传入的this为window
            }, delay)

如果fn不显式绑定this，这时候在外层输出的this也为window，因为此时在debounce函数内调用了fn，因为这时候调用的fn()，并没有通过谁来调用，而是在

4.事件对象的传入传出

javascript 复制代码

    btn.addEventListener('click',debounce(function(e) {
        console.log(e);//输出事件对象
        console.log(this);//有this
    },1000))
    
        return function(...args){
            
            
            // 如果timer有值，清除timer
            clearTimeout(timer)
            // 将计时器id给timer
            timer = setTimeout(() => {
                console.log(this); // 有this
                let that = this 
                fn.apply(that,args) 
            }, delay)
        }

由于在事件函数内触发时调用的是debounce返回的函数，所以事件对象也被addEventListener方法给注入进了返回的函数，这时候我们就可以用..args接收，所接收的args则为事件对象所处的数组，再将args通过apply方法传递给我们自己写的fn回调函数，这样就可以在debounce函数外层fn的参数里，得到我们想要的事件对象e