节流、防抖

节流和防抖主要处理事件处理函数高频调用,减少浏览器负担

节流:尽量减少触发次数,mint-ui上封装了一个方法

    <script>
        var throttle = function (fn, delay) {
            var now, lastExec, timer, context, args; //eslint-disable-line

            var execute = function () {
                fn.apply(context, args);
                lastExec = now;
            };

            return function () {
                context = this;
                args = arguments;
                now = Date.now();
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                console.log(lastExec)
                if (lastExec) {
                    var diff = delay - (now - lastExec);
                    if (diff < 0) {
                        execute();
                    } else {
                        timer = setTimeout(() => {
                            execute();
                        }, diff);
                    }
                } else {
                    execute();
                }
            };
        };
        var scrolls = throttle(aaa, 1000);
        function  aaa(){
            console.log(111111)
        }
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
    </script>

throttle 方法return出来一个方法(闭包),所以throttle执行完后,在闭包里使用的局部变量和方法都没有销毁,将每次执行fn的时间记录到lastExec变量中。
第一次时fn会被执行,以后都会有delay时间的限制,delay时间一到就会执行一次事件处理函数。
最后的输出结果是
在这里插入图片描述

防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
上来不会执行,当满足指定的时间后才会执行
也就是将几次操作合并为一次操作进行

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}

借用别人总结的话:函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值