防抖与节流

防抖

含义

合并多次函数为一个

思路

将目标方法包装在setTimeout里面，然后该方法是一个事件的回调函数，如果一直执行该回调，则通过clearTimeout将连续动作给删除，待不触发该事件时，setTimeout就会执行这个方法

使用场景

页面resize需要做页面适配，需要根据页面最终情况做DOM渲染。或者input输入框在进行校验的情况下，只校验输入最后的结果。

简易实现

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

节流

含义

一定时间内多次函数内只执行一次

思路

通过一个阀门去控制，一定时间内调用一次函数，该阀门可以是状态值，也可以是时间差。

使用场景

无限滚动下拉框的时候，用户不断在往下拖动滚动条，在一定时间内执行给出反馈。

简易实现

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}