函数节流与防抖

同一个操作会连续触发某个行为时,为了防止因为频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃,我们需要做一定的限制。

所谓函数节流,是指某连续操作,前后两次操作的时间间隔达到我们的设置,才去执行对应行为。
函数防抖是函数节流的变种,如果我们希望,即使连续操作时间间隔没有达到我们的预期,也会在经过一定时间后,保证对应行为会执行一次。

function throttle(method , duration ,delay ){
            var timer = null, 
                // 记录下开始执行函数的时间
                begin = new Date();

            return function(){
                var context = this, 
                    args = arguments, 
                    // 记录下当前时间
                    current = new Date();
                // 函数节流里的思路
                clearTimeout(timer);

                // 记录下的两个时间相减再与duration进行比较,如果这里不做duration的判断,那就是简单的函数节流
                if(current-begin >= duration){
                     method.apply(context , args);
                     begin = current;
                }else{  
                    timer = setTimeout(function(){
                        method.apply(context , args);
                    } , delay);
                }
            }
        }
        window.onresize = throttle(function(){console.log('resize')},1000,500)
感觉被underscore.js中的throttle和debounce坑了,正好两个意思相反。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值