函数节流和函数防抖

发表于 2018-04-11

这篇文章来说一下两个相似又不同的的概念，这是一个新手几乎不会注意到，但是却很重要的问题，函数的节流和防抖。下面先来看一看它们究竟是什么。

首先要知道，函数节流和防抖的最终目的都是为了限制函数调用次数。当函数执行频率达到一定限度时候，再增加频率是没有意义的，此时我们就需要限制函数的执行频率，不能白白的浪费性能，甚至还会因此造成卡顿等等超出预期的情况。

函数节流和函数防抖利用的是两种不同的思想，它们使用的业务场景不尽相同，下面来具体看一下。

函数节流（throttle）

函数节流指的是让函数在一定时间内只执行一次，这样就极大限制了函数的执行次数。比如我们要监听滚屏或窗口大小调整事件，其实是没有必要每滚动一点点就执行函数的，我们完全可以减少监听次数，此时就需要函数节流。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }
    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

函数节流的实现方式非常类似于加锁的效果，我们采用一个变量作为标记，当一个函数进入执行时，把标记置为不可用，接下来的函数就无法进入执行了，等到函数执行完毕再放开信号，下一次才可以进入。通过借助setTimeout可以实现超时执行的效果，从而限制了函数的执行频率。

函数防抖（debounce）

函数防抖和函数节流的目的不同，函数防抖一个典型的应用场景就是用户输入校验，用户在一定要等到用户输入完成校验才会有意义，而不是用户每输入一个字符就校验一次。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};

函数防抖利用了setTimeout的缓存效果，每次创建一个定时器，把函数放在定时器里面执行，在这个过程中，一旦函数再次被调用，就会首先清除已有定时器，这样未执行的函数就无效了，最多只能有最后一个函数处于待执行状态，于是就实现了只执行最后一次的效果。

函数节流和函数防抖的概念并不复杂，但是在实现性能优化上有很重要的作用，常用的工具库如lodash等也都有函数节流和函数防抖的相关实现。