聊聊函数节流（throttle）和函数去抖（debounce）

讲在前面

进腾讯快半个多月了，说实话在这半个多月里见识了许多新的东西，比如VR，AR，WebGL，AI技术等等。作为技术男的我对此十分感兴趣，连玩了八年的DNF都放弃了，这需要多么大的勇气和决心。废话不多说了，想写这边文章是因为今天做项目的过程中遇到一个坑，其实以前就遇到过，只是没有好好总结下，这个问题就是如何优化window的resize和scroll事件。就算工作在忙，我觉得都要学会总结，总结也是一个学习和提升的过程。

问题引申

其实我们可以将这个问题进行扩大，不仅仅局限于window的scroll和resize事件，由它引申出来的问题是我们如何解决让一个函数不频繁的触发。

解决办法

目前业界对于这个问题有两种不同的方法，一个是函数节流（throttle），另外一个就是函数去抖（debounce）。

函数节流

函数节流：就是函数按照一个周期执行，例如给window绑定一个resize事件之后，只要window大小改变就打印1，如果不采用函数节流，当我们将窗口调节的时候发现控制台一直打印1，但是使用了函数节流后我们会发现调节的过程中，每隔一段时间才打印1。
下面是函数节流的简单实现。

var throttle = function(delay, cb) {
    var startTime = Date.now();
    return function() {
        var currTime = Date.now();
        if (currTime - startTime > delay) {
            cb();
            startTime = currTime;
        }
    }
}

函数去抖

函数去抖：就是当事件触发之后，必须等待某一个时间之后，回调函数才会执行，假若再等待的时间内，事件又触发了则等待时间刷新。还是上面那个例子，如果我们一直改变窗口大小，则不会打印1，只有当我们停止改变窗口大小并等待一段时间后，才会打印1。
下面是函数去抖的简单实现。

var debounce = function(delay, cb) {
    var timer;
    return function() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
            cb();
        }, delay);
    }
}

最后

其实以上这两个的思想还蛮好理解的，两种方法均使用了闭包（缓存变量），但是这是简单的实现。
目前lodash和underscore这两个现成的js库都对以上方法进行了实现，而且封装的更好，功能更完善，有兴趣的同学可以阅读下它的源码，我抽时间也会去阅读一下的。最后希望大家再前端的道路上越走越远。