hz-防抖和节流

//一句话总结  防抖 先给段时间执行，这段时间内触发就重新等待（重点等待，再执行）  节流：先执行一次，再执行需要等段时间（重点执行，再等待）

//防抖：why:在滚动和输入时以及请求响应慢时，频繁触发没必要的事件。

//how:在一段时间内只触发一次，如果在等待时间内触发，取消上一次

// 案例  滚动触发 事件容器 方法    容器方法 控制定时任务

//一步

function defence (fn,delay){

//返回函数 执行定时任务

}

//添加事件监听 执行防抖函数

window.addEventListener("scroll",defence(方法，时间))

//详细代码案例

function defence(fn,delay){

    // 防止定时器叠加  先清除定时器

 let cleart=null;

return function(){

    clearTimeout(cleart)//清除之前 ，过指定时间  执行方法   后者为主

cleart=setTimeout(()=>{

    fn.apply(this,argument)

},delay)

}

}

function handlerFn(){

console.log("防抖")

}

window.addEventListener("scroll,defence(handlerFn,500))

//节流  why:防爆点击，节省资源

//how ：执行一次后等待结构  在指定时间内执行一次，多次触发 直接返回，通过添加开关。  

function whz(fln,delay){

            //初始化要执行

            let isRun=true

            return function(){

                if(!isRun){

                    return 

                }

                isRun=false

                setTimeout(()=>{

                     fln.apply(this,arguments);

                     isRun=true

                },delay)

            }

        }

        function runFn(){

            console.log("模拟节流")

        }

        window.addEventListener("scroll",whz(runFn,500))