某些情况下，例如响应鼠标移动、窗口大小调整、页面滚动的事件，触发的频率较高。如果这个时候需要处理的函数稍微复杂点，需要较多的运算执行事件，响应速度跟不上触发频率，这个时候可能会出现卡顿，严重可能会导致页面崩溃。
但是大多数情况下，我们并不需要那么高的频率去响应这个事件。下面介绍两种方法来解决这个问题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
