函数节流(throttle)和函数去斗(debounce)

一.函数节流和函数去斗是解决什么问题的:

大家都知道,人的眼睛能感知的最快反应速度是在0.1秒到0.4秒之间,所以0.1秒内的变化从视觉上来说是无意义的。而且如果涉及dom操作,或者网络操作会严重浪费资源,可能导致浏览器崩溃,或者服务器崩溃。例如一下场景:

(1)浏览器滚动事件scroll

  (2)  鼠标的点击事件 mouseup, mousedown,mousemove

  (3)  键盘的keyup, keydown, input事件

(4)window的resize事件

  以上四个场景中,事件都是连续触发的,如果也连续执行相应的回调函数,不但浪费资源,而且没有意义,还有可能导致浏览器或者服务器崩溃。  函数节流和函数去斗就是为了解决类似这样问题的。

二.思想及简单实现:

函数节流:

设定一个时间周期,周期性的执行一个函数;

var _throttle = function (wait, fn) {
        var pre = 0, result;
       
        return function(){
            var now = (new Date()).getTime();
            if(now-pre > wait) {
                result = fn.apply();
                pre = now;
                return result;
            }
        }
 };

 // 用setInterval模拟每10毫秒执行一次,但真正的执行时间是10秒
 var throttle = _throttle(10000, function(){
         console.log("*******************")
 });
 setInterval(throttle, 10);

函数去斗:

设定一个延迟时间,延迟时间到了再去执行函数,如果在延迟时间内重复调用则重新计算延迟时间

   var _debounce = function(wait, fn){
         var timer = null;
         return function(){
             if(timer){
                 clearTimeout(timer);
                 timer = null;
             }
             timer = setTimeout(function(){
                 var result = fn.apply();
                 clearTimeout(timer);
                 timer = null;
                 return result;
             }, wait)
         }
     };

     // 用setTimeout模拟1秒中调用一次,每次调用都会重置时间。函数真正执行时间是在 8秒后
     var debounce = _debounce(3000, function(){
         console.log('*******************')
     });

     setTimeout(debounce,1000);
     setTimeout(debounce,2000);
     setTimeout(debounce,3000);
     setTimeout(debounce,4000);
     setTimeout(debounce,5000);

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值