函数节流与防抖

2017-03-13

函数节流

我们网站经常会有这样的需求，就是滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用了。所以我们每间隔某个时间去执行某函数，避免函数的过多执行，这个方式就叫函数节流。
为了更好的理解这个概念，我们先来完成一个小需求，就是浏览器滚动条在滚动过程中打印n值：

<!DOCTYPE html>
<html>
<head>
    <title>函数节流与防抖</title>
</head>
<body style="height:1000px">
<script type="text/javascript">
    n=0;
    function funHandler(){
        console.log(++n);
    }
    window.onscroll=funHandler;
</script>
</body>
</html>

功能倒是实现了，但是看一下控制台可以发现频繁的在打印n值，如果我们的 funHandler() 方法是 ajax 向服务器发送请求，那还得了啊！

下面我们利用函数节流的两种方案来完成这个需求：
第一种是按照《JavaScript高级程序设计》中的函数节流方法，原理很简单，利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。这样我刚才的代码可以改为：

<script type="text/javascript">
    n=0;
    function funHandler(){
        console.log(++n);
    }
    function throttle(method,context){
        clearTimeout(method.tId);
        method.tId=setTimeout(function(){
            method.call(context);
        },500);
    }
    window.onscroll=function(){
        throttle(funHandler,window);
    };
</script>

滚动一下试试，果真只执行了一次

第二种是网上的一种节流方案，调试一下试试，效果和刚才是一样的：

<script type="text/javascript">
    n=0;
    function funHandler(){
        console.log(++n);
    }
    function throttle(method,delay){
        var timer=null;
        return function(){
            var context=this, args=arguments;
            clearTimeout(timer);
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
    }
    window.onscroll=throttle(funHandler,500);
</script>

函数防抖

再来一个类似的需求，就像百度首页输入自动提示一样的东西，我在text上绑定keyup事件，每次键盘弹起的时候自动提示，但是又不想提示那么频繁，于是我用了上面方法，但是悲剧了，只有停止输入等500毫秒才会提示，在输入过程中根本就没有提示。看了一下代码，可不是嘛，只要是用户会盲打，在500毫秒内按一下键盘，提示函数就会不断被延迟，这样只有停下来的时候才会提示，这就没意义了。这个时候就用到了函数防抖，函数防抖就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算。其实它是在函数节流的基础上间隔固定时间来执行一次。如下所示：

<script type="text/javascript">
    n=0;
    function funHandler(){
        console.log(++n);
    }
    function throttle(method,delay,duration){
        var timer=null,
        begin=new Date();// 记录下开始执行函数的时间
        return function(){
            var context=this,
            args=arguments,
            current=new Date();// 记录下当前时间
            // 函数节流里的思路
            clearTimeout(timer);
            // 记录下的两个时间相减再与duration进行比较
            if(current-begin>=duration){
                 method.apply(context,args);
                 begin=current;
            }else{
                timer=setTimeout(function(){
                    method.apply(context,args);
                },delay);
            }
        }
}
    window.onscroll=throttle(funHandler,500,2000);//因为返回函数句柄，不用包装函数了
</script>

这样每次我们判断间隔了多久，要是超过设置时间则立即执行一次，以刚才例子试一试效果，发现果真既没有频繁执行也没有就最后执行，感兴趣的朋友们可以试试哟！