浅谈JavaScript中的防抖和节流

日常生活中：我们需要解决项目中由于网络延迟或者一些其他原因造成接口重复调用导致后台数据重复

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 throttle 和 debounce ，超时设定为15秒，不考虑容量限制。

throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。
debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重新计时，直到15秒超时，开始运送。

无论是防抖还是节流最终的目的都是避免回调函数中的处理每次都执行。

1.防抖的思想：

借助事件队列和setTimeout定时器来实现：

// 计时器
var timer = false;
// 
var shake = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        console.log("防抖");
    },3000);
};

为什么要清除定时器：因为如果每次调用函数的时候不清除会导致多次触发

比如：

 for (var i = 0; i < 10; i++) {
        (function (i) {
            setTimeout(function () {
                console.log(i);
            }, 3000);
        })(i);
    }
//三秒后会输出1,2,3,4,5,6,7,8,9

 var timer2 = false;
    for (var i = 0; i < 10; i++) {
        clearTimeout(timer2);
        (function (i) {
            timer2 = setTimeout(function () {
                console.log(i);
            }, 3000);
        })(i);
    }
//三秒后输出9

2.节流思想如下：

借助定义的变量和setTimeout来实现一定时间内只执行一次

var flag = true;

var throttle = function(){
    if(!flag) return false;
    flag = false;
    setTimeout(function(){
        console.log("节流"); flag = true; },300); };

浅谈JavaScript中的防抖和节流

猜你喜欢