防抖与节流，记住这个例子，再不会搞混了。

防抖与节流是前端优化交互体验的重要技巧，最近在业务开发中关于一个按钮的点击应该采用防抖还是节流与同事产生了激烈的讨论，发现还是很多同学其实没有搞清楚防抖与节流的应用场景，这里翻出很久之前记在博客上的文章，再翻新发一遍吧~

博客原文地址：blog.crazyming.com/note/691/

函数防抖

将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

【触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间】

举个栗子：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

函数节流

使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

【高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率】

举个栗子：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

区别

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

代码实现

防抖节流可以用计时器和时间戳的两种方式实现，如 loadsh 等一些工具库 也提供了封装，业务中不需要自己写防抖节流函数了，这里贴一下以前自己实现的例子（更多例子可以点博客原文地址去取）：

var debounce = function(time, action) {
            var last;
            return function() {
                var context = this,
                    args = arguments
                clearTimeout(last);
                last = setTimeout(function() {
                    action.apply(context, args);
                }, time)
            }
        }


        function fd() {
            console.log("防抖啊啊啊啊~~")
        }

        var aaa = debounce(1000, fd);


        var throttle = function(time, action) {
            var timer = null;
            return function() {
                var context = this;
                var args = arguments;
                if (!timer) {
                    timer = setTimeout(function() {
                        action.apply(context, args);
                        timer = null;
                    }, time);
                }
            }
        }


        function jl() {
            console.log("节流啊  节流 ")
        }



        var bbb = throttle(1000, jl)

DEMO

之前也写了 demo，可以去验证下：

防抖demo地址:
case.crazyming.com?link=web/debounce

节流demo地址:
case.crazyming.com?link=web/throttle