防抖和节流

原创 ludan  2019-12-08 20:51:22  阅读 768 次 评论 0 条

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

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

/*
    函数的防抖 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;
本文地址:https://webge.net/?id=86
版权声明:本文为原创文章,版权归 自由小鸟 所有,欢迎分享本文,转载请保留出处!

评论已关闭!