防抖和节流

如果我在一个时间内只执行一次，最好用防抖，如果只是想在执行时，设置一下间隔时间那么用节流

防抖是在一个时间内只能执行一次，如果频繁操作就会清除重新开始计算执行，我设置的时间内整个过程中只会执行一次

/*
    函数的防抖 debounce，不是某个事件触发就去执行函数，而是在指定的时间间隔内执行一次，减少函数执行的次数
    @params:
        func:要执行的函数
        wait:间隔等待时间
        immediate:在开始边界触发，还是结束边界触发 true是开始边界执行
    return:
        可被调用的函数
*/
function debounce(func,wait,immediate){
    let timeout=null, //定时器 setTimeout
        result=null;  //接收函数返回的结果

    return function(...args){
        let context=this,
            now=immediate && !timeout;
        //执行之前一定先清除定时器  
        clearTimeout(timeout);   //防抖的关键，在设置新的定时器之前先把之前的定时器都清除
        //如果不是立即执行就走这里定时器
        timeout=setTimeout(()=>{ //在结束边界执行
            if(!immediate) result=func.call(context,...args);
            clearTimeout(timeout);
            timeout=null;
        },wait);
        if(now) result=func.call(context,...args) //立即执行,在开始边界执行
        return result;
    }
}

let count=0;
function fn(){
    console.log(++count);
}

let aa=debounce(fn,100,true);
window.onscroll=aa;

节流是在一个时间内可以执行多次，函数节流是为了缩减执行频率，当达到了一定的时间间隔就会执行一次

/*
         * throttle：函数节流是为了缩减执行频率，当达到了一定的时间间隔就会执行一次
         *   @params
         *      func:需要执行的函数
         *      wait:设置的间隔时间
         *   @return
         *      返回可被调用的函数
         */
        let throttle = function (func, wait) {
            let timeout = null,
                result = null,
                previous = 0; //=>上次执行时间点
            return function (...args) {
                let now = new Date,
                    context = this;
                //=>remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间间隔
                let remaining = wait - (now - previous);
                if (remaining <= 0) {
                    clearTimeout(timeout);
                    previous = now;
                    timeout = null;
                    result = func.apply(context, args);
                } else if (!timeout) {
                    timeout = setTimeout(() => {
                        previous = new Date;
                        timeout = null;
                        result = func.apply(context, args);
                    }, remaining);
                }
                return result;
            };
        };

        let count = 0;

        function fn() {
            console.log(++count);
        }
        let lazyFn = throttle(fn, 1000);
        window.onscroll = lazyFn;