js函数防抖与节流

防抖

不管时间触发的频率有多高，必须要在停止触发后的一定时间内才能执行，例如：滚动事件，必须等到滚动停止后才能输出打印

// 利用闭包，返回
    function debounce(fn, wait, immediate) {
        console.log("heihei")
        let timer = null;
        //  返回一个函数
        return function (...args) {
            console.log(this)
            // 每次触发事件时都取消之前的定时器
            clearTimeout(timer);
            // 判断是否要立即执行一次
            if (immediate && !timer) {
                fn.apply(this, args);
            }
            // setTimeout中使用箭头函数，就是让 this指向 返回的该闭包函数，而不是 debounce函数的调用者
            timer = setTimeout(() => {
                console.log(this,"ss")
                fn.apply(this, args)
            }, wait)
        }
    }
    // debounce(handleResize, 200)，这个地方相当于传入的参数，是从debounce中返回的，其相当于闭包锁死了timer的值
    window.addEventListener('resize', jieliu(handleResize, 200));
    function handleResize(){
        console.log("???")
    }

节流

节流就是降低事件的触发频率，比如一个50ms就触发一次的事件，为了不让浏览器频繁渲染，合并成1000ms再执行一次
利用时间戳：

    // 函数节流
    function jieliu(fn,wait){
        let date = 0
        return function(){
            if(Date.now()-date > wait){
                date = Date.now()
                fn()
            }
        }
    }

利用定时器

    // 利用定时器
    function jieliu2(fn,wait){
        let timer = null
        return function(){
            if(!timer){
                timer = setTimeout(()=>{
                    timer = null
                    fn()
                },wait)
            }
        }
    }

参看文章：函数防抖与节流