1.函数去抖（debounce）

函数调用n秒后才会执行，如果函数在n秒内被调用的话则函数不执行，重新计算执行时间

1
2
3
4
5
6
7
8
9
10
11
function debounce(method,delay){
      var timer=null;
       return function(){
            var context=this
            var args=arguments;
            clearTimeout(timer);
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
}
函数去抖的应用场景：

1.监控键盘keypress事件，每当内容变化的时候就向服务器发送请求
2.在页面滚动的时候监控页面的滚动事件，会频繁执行scroll事件
3.监控页面的resize事件，拉动窗口改变大小的时候，resize事件被频繁的执行

上面三种场景中都会频繁触发指定事件，比如第一种情况，每当输入框内容变化之后就向服务器发送请求，可能会导致一秒钟向服务器请求很多次，这显然是不合理的，我们可以使用函数去抖来优化。

2.函数节流（throttle）

函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期
function throttle(method,duration){
var begin = new Date();
return function(){
var context = this
var args=arguments
var current=new Date();
if(current-begin>=duration){
method.apply(context,args);
begin = current;
}
}
}
function resizehandler(){
console.log(++n);
}
window.onresize=throttle(resizehandler,500);

函数节流的应用场景

1.上拉下拉刷新，每拉动一次彻底完毕之后才可以下一次拉动
2.图片轮播动画，每一张图片动画完成之后才开始下一个图片的动画