前端的防抖和节流，封装好的一个函数

/**

 *每个事件添加都要new一个对应的实例去使用，不可多个事件中使用同一个rdt实例 

 * const rdt = new Reduction(); 

 * 写法一 rdt.debounce(1000,(data)=>{},data);

 * 写法二 rdt.debounce(1000).then(()=>{});

*/

export const Reduction = function(){

    let timer=null;  let canRun= true;  

    /**   

    * 防抖

    **/  

    const debounce = function(waiting=100,callback, data = {}) {    

        let debounceResolve;    

        const promise = new Promise((resolve)=>    {      

           debounceResolve = resolve;    

        })    

        if(timer!=null) {      

            clearTimeout(timer);     

            timer = null;    

        }

        timer = setTimeout(()=>{      

            callback && typeof callback === 'function' && callback.call(this, data);      debounceResolve();    }, waiting);    

            return promise;  

        }

        /**  

         * 节流   

        **/  

        const throttle = function(duration = 100, callback, data = {}) {    

            if(!canRun) return;

            let throttleResolve;    const promise = new Promise((resolve)=>{      

                throttleResolve = resolve;    

            })    

            canRun = false;    setTimeout(()=>{      

                 callback && typeof callback === 'function' && callback.call(this, data);      

                throttleResolve();      

                canRun = true;    

            }, duration);   

         return promise; 

     } 

     return {   

        debounce,

        throttle  

    };

防抖动和节流本质是不一样的。

    防抖动是将多次执行变为最后一次执行，

    节流是将多次执行变成每隔一段时间执行。

结合应用场景

debounce

    1.search搜索，用户在不断输入值时，用防抖来节约请求资源。

    2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

throttle

    1.鼠标不断点击触发，mousedown，click,touchmove等(单位时间内只触发一次)

    2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来稀释函数执行频率

感谢，老铁的阅读，如果喜欢的,帮忙点个👍,你的支持我是前进的动力++