JavaScript函数去抖和函数节流

2018-01-23

JavaScript函数去抖与函数节流

实际碰到的场景一：

之前公司网站上有个需求：鼠标划出二级菜单则收缩一二级菜单，然后内容主体部分展示区域变大（动画实现效果）。当时做的时候自己也只是很简单的加了个鼠标事件，结果在实际使用中发现，当你来回移动鼠标很快的时候，动画事件会一直持续，造成页面显示卡顿，这个对用户体验很差。

实际遇到的场景二：

有个页面的输入框要实现根据用户的持续不断的输入动态显示几个下拉选项供用户挑选（类似百度搜索的效果），这种情况下应该不应该每输入一个字就进行ajax调用，而应该实现一段时间内执行一次。

具体可能的应用场景：

window对象的resize、scroll事件
拖拽时的事件
鼠标移入移出事件
输入框文字输入事件

函数去抖

/**
 * [debounce 就是当事件触发之后，必须等待某一个时间之后，回调函数才会执行，假若再等待的时间内，事件又触发了则等待时间刷新]
 * @Author   lupinggan
 * @DateTime 2018-01-23T10:29:16+0800
 * @param    {[type]}                 method [description]
 * @param    {[type]}                 delay  [description]
 * @return   {[type]}                        [description]
 */
 function debounce(method,delay){
      var timer=null;
       return function(){
            var context=this, args=arguments;
            clearTimeout(timer);
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
}

var n = 0;
function resizehandler(){
      console.log(++n);
}
 window.onresize=debounce(resizehandler,800);

函数节流

/**
 * [throttle 函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期]
 * @Author   lupinggan
 * @DateTime 2018-01-23T10:43:02+0800
 * @param    {[type]}                 method   [description]
 * @param    {[type]}                 duration [description]
 * @return   {[type]}                          [description]
 */
function throttle(method,duration){
        var  begin=new Date();
        return function(){
            var context=this, args=arguments, current=new Date();
            if(current-begin>=duration){
                 method.apply(context,args);
                 begin=current;
            }
        }
}
var n = 0;
function resizehandler(){
    console.log(++n);
}
window.onresize=throttle(resizehandler,800);

函数去抖与函数节流的区别：

函数去抖是设置了一个延迟执行的定时器。在这个延迟的时间里，如果事件又触发了，那么原来的定时器取消掉，同时又启动一个新的定时器去等待执行。造成的效果是：如果事件来回触发一直保持在延迟的时间内，那么实际的回调函数就一直不会执行。
函数节流和函数去抖类似唯一的区别就是：在设定的定时器周期内，只要延迟的时间到了，这个回调函数必定会执行一次。