用js实现简单的防抖节流

let timer;
//防抖：在n秒时间内，不停的被触发，只执行最后一次
function shake(param) {
    console.log(timer, "111")
    if (timer) {
        console.log(timer, "222")
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        console.log('防抖')
    }, 1000)
}

//节流：在n秒时间内，不停的被触发，只执行第一次
function throttle(param) {
    if (timer) return
    timer = setTimeout(() => {
        console.log('节流')
        timer = null;
    }, 1000)
}

缺点：上面不仅增加了一个全局变量，同时防抖的逻辑和业务的逻辑混合到了一起！
更好的封装，使用闭包

//防抖 闭包封装
<input type="text">
<script>
    let inp = document.querySelector("input");
    inp.oninput = debounce(function(){
        console.log(this.value)
    },500)
    //防抖函数
    function debounce(fn,delay){
        let t = null;
        return function(){
            if(t !== null){
                clearTimeout(t)
            }
            t = setTimeout(()=>{
                fn.call(this,args);
            },delay)
        }
    }
    //节流函数：n段时间内只执行第一次
    function throttle(fn,delay){
        let flag = true;
        return function(){
            if(flag){
                setTimeout(()=>{
                    fn.call(this,args);
                    flag = true;
                },delay)
            }
            flag = false;
        }
    }
</script>