浅显易懂的防抖和节流，两分钟理解

引言：

防抖和节流，不管是在面试仍是在实际工做中，都是一个常会涉及到的问题。

甚至在面试中，存在出现手撕防抖节流函数的可能性。

本人提倡用最精简的方式，浅显易懂涨知识，至少用两分钟看完本文可以了解它是谁。

1.防抖

概念：

防抖：持续触发事件时 ！

若必定时间段内没触发事件 则执行。

若必定时间段内触发了事件 则从新计时。

应用场景：

1.模糊搜索：（为了下降带宽消耗，减小请求次数，在模糊搜索/联想查询业务中会用到防抖。）

 

2.王者荣耀回城效果：（相似防抖过程的例子，我点击取消回城就取消，不点击它就继续执行）

 

实现：

HTML代码：

<input type="text" id="inputText">

JavaScript代码：

 1 /* 防抖函数 */
 2     function debounce(func, delayTime) {
 3         var timer = null; // 初始化timer变量 而且保持timeout变量不被释放
 4         return function() {
 5             if (timer) {
 6                 clearTimeout(timer); //清除延时器
 7             }
 8             timer = setTimeout(func, delayTime);
 9         }
10     }
11     /* 处理函数 */
12     function deal() {
13         console.log("ajax");
14     }
15 
16     var inputText = document.getElementById('inputText');
17     inputText.addEventListener('keyup', debounce(deal, 1000));

效果：

在输入框输入“jimmy”，并不会打印5个“ajax”，而是输入最后一个字符延迟一秒后，才会输出。若连续输出，输入上个字符的keyup事件的延迟会重置。

 

2.节流：

概念：

节流：持续触发事件时 ！

一段时间内 只调用一次事件处理函数。

应用场景：

1.验证码倒计时：（登陆注册页面中，这种业务很常见，目的是为了防止用户频繁点击，形成频繁请求，采用节流解决。）

 

2.各大游戏技能CD冷却：（一样是典型的例子，冷却CD的做用就是不但愿玩家频繁释放技能。）

3.滚动事件监听：（若是监听到滚动条滚动，而执行事件的话，会频繁执行。因此采用节流，大大减小资源浪费。）

　　  

 

 

实现：

HTML代码：

<button id="shoot">发射</button>

JavaScript代码：

/* 节流函数 */
    function throttle(func, delay) {
        var timer = null;
        return function() {
            var that = this;
            var args = arguments;
            if (!timer) {
                timer = setTimeout(function() {
                    timer = null;
                    func.apply(that, args)
                }, delay)
            }
        }
    }

    function deal() {
        console.log("砰！");
    };

    var btn = document.getElementById('shoot');
    btn.onclick = throttle(deal, 2000);

效果：

　　点“发射”按钮，延迟一秒输出，若在这一秒钟连续点击，则只会执行一次。

         

3.总结：

以下图所示：

防抖：一个事件开始执行，若过程当中在m时刻打断，则时间从头开始计算；不然顺序执行。

节流：一个事件开始执行，若在一个触发点触发事件，则通过Tx时间段才能继续触发(x=1,2,3,4,...)。

 

原创地址：http://www.javashuo.com/article/p-sztyxdui-mg.html