手写防抖节流函数

防抖与节流

防抖

函数防抖是指在事件被触发n秒后执行回调，如果在这n秒内，事件再次被触发，则会重新计时。
可以使用在一些请求的事件上，避免因为用户的多次点击向后端发送多次请求

手写一个防抖函数

防抖函数是返回一个函数

//防抖
function debounce(callback,delay){
    
    
    //每次触发事件的时候，都会传入这个event事件
    return function(event){
    
    
        //如果在delay时间内再次触发事件，首先判断timeOutId是否存在，如果存在就重新计时
        if(this.timeOutId){
    
    
            clearTimeout(this.timeOutId)
        }
        //如果使用let 或者var的话，每次执行debounce都会重新开始计时
        this.timeOutId = setTimeout(function(){
    
    
            //改变当前callback的this指向，调用call之前指向window，更改之后，谁调用这个防抖函数就指向谁
            callback.call(this,event)
            //每次执行完回调函数之后都会删除timeOutId,否则下次进来还是存在的
            delete this.timeOutId
        },delay)
    }
}

应用场景

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
• 判断scroll是否滑到底部，滚动事件+函数防抖

节流

函数节流是指规定一个时间单位，在这个单位时间内，只能有一次去触发事件的回调函数的执行，如果在同一个时间单位内某事件被触发多次，那么它只能生效一次。
节流可以使用在scroll函数的事件监听上，通过事件节流来降低事件调用的频率

手写一个节流函数

//节流
function throttle(callback,delay){
    
    
    //先获取当前的时间，当函数被绑定的时候就会被获取到
    let time1 = Date.now();
    return function(event){
    
    
        //获取事件执行之后的时间
        let time2 = Date.now();
        if(time2 - time1 > delay){
    
    
            //执行callback函数，并更改this的指向，谁调用它this就指向谁
            callback.call(this,event)
            //更新time1的时间为上次触发的时间
            time1 = time2
        }
    }
}

应用场景

• 游戏中的刷新率
• DOM元素拖拽
• Canvas画笔功能