某些情况下，例如响应鼠标移动、窗口大小调整、页面滚动的事件，触发的频率较高。如果这个时候需要处理的函数稍微复杂点，需要较多的运算执行事件，响应速度跟不上触发频率，这个时候可能会出现卡顿，严重可能会导致页面崩溃。

但是大多数情况下，我们并不需要那么高的频率去响应这个事件。下面介绍两种方法来解决这个问题throttle和debounce

拿电梯超时来举个例子。统一超时时间为10秒

• throttle 保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，如果10秒内有人又上来了，不重新计时
• debounce 如果电梯里有人进来，则等待10秒。如果在10秒期间又有人上来，则重新开始计时，直到10秒超时，开始运行

debounce

  var debounce = function(fn,wait){
            var timer = null;// 避免产生全局变量,使用了闭包的写法
            return function(){ //页面滚动的时候，运行的是这个方法
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn();
                },wait);
            }
        }
        window.onscroll = debounce(con,100);
        function con(){
            console.log(1);
        }

问题一 上面的代码已经可以满足基本的使用了。但是有一个问题，如果我们一直滚动页面，那么这个延迟函数一次都不会执行。

这个时候我们需要修改一下。当用户触发滚动的时候，应该在某段时间内至少触发一次，既然是在某个时间内，那么这个判断条件就可以取当前的时间毫秒数，每次函数调用把当前的时间和上一次调用时间相减，然后判断差值如果大于某段时间就直接触发，否则还是走timeout的延迟逻辑

/**
* fn 需要延迟调用函数
* wait 第一次调用等待时间
* time 至少多长时间触发一次
*/
var throlling = function(fn,wait,time){
            var previous = null;//记录上一次运行的时间
            var timer = null;

            return function(){
                var now = +new Date();

                if(!previous) previous = now;// 第一次进来就存入一个当前时间，后面就不会再进来了

                if(now - previous > time){ 后面就会进入这个里面了
                    clearTimeout(timer);
                    fn();
                    previous = now;// 执行函数后，马上记录当前时间
                }else{// 第一次进来走的是else里面
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn();
                    },wait);
                }
            }
        }
        window.onscroll = throlling(con,100,500);
        function con(){
            console.log(1);
        }

问题二 如果被调用的函数需要传递参数怎么办

可以使用arguments和apply来实现

 fn.apply(null,arguments)

问题三 上下文丢失

debounce = function(fn,wait,time,context){
  fn.apply(context,arguments);
}

参考信息

https://keelii.github.io/2016/06/11/javascript-throttle/
http://www.css88.com/archives/6598
https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs