前端基础学习之防抖（debounce）和节流（throttle）

1.防抖（debounce）

例如在实现移动端的列表条件查询时，文本框中如果每输入一个字符都去后台查询一次，即短时间内大量触发同一事件，非常影响性能。
解决办法：在第一次触发事件时，不立即执行查询，设置一个延迟执行的时间限制，若在这时间范围内再次触发，则清除当前的定时器，开启新的延迟执行查询，以此类推，直到这段时间范围内不再触发事件，执行查询函数。

• 防抖函数： （其实就是返回一个延时定时器，在下一次调用时看是否有值，有则清空开启下一个，直到没有了，顺利执行延迟器中的函数）

let debounce=function (func,delay) {
        let timer=null;
        return function (...args) {
            if(timer) clearTimeout(timer);
            timer=setTimeout(()=>{
                func.apply(this,args);
            },delay)
        }
 }

• 模拟文本输入查询

 /*模拟调用后台的接口*/
    let search=function () {
        console.log("search api");
    }
    /*主模块文本内容变化*/
    const dbHandle=debounce(search,200);
    document.querySelector("#tt").oninput=function () {
        dbHandle();
    }

2.节流（debounce）

例如在滚动条滚动的时候，触发某一事件，当一直滚动时，又是一个短时间内高频触发某一事件的过程。但是这个时候如果使用防抖，那么如果用户不停地来回滚动，就可能一直不触发，从使用感受上来讲，这样不是太合适。
解决办法：让函数执行一次，之后的一段时间内暂时失效，过了这段时间之后又重新激活。

• 节流函数（也是返回延时器，在执行延时器中的函数之前关闭阀门，在执行完函数之后再次打开）

let throttle=function (func,delay) {
        let valid=true;
        return function () {
            if(!valid){
                return false
            }
            valid=false;
            setTimeout(()=>{
                func.apply(this);
                valid=true;
            },delay)
        }
    }

• 模拟滚动触发事件

const scrollHandel=function(){
        let scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
        console.log("距离顶部的位置："+scrollTop);
 }
 window.onscroll=throttle(scrollHandel,1000);