概念解释

函数节流和函数防抖，两者都是优化高频率执行 js 代码的一种手段。

在一定时间内，代码执行的次数不一定要非常多，达到一定的频率就足够了。有些情况下，代码运行频率达到一定程度时，超过那个频率所带来的效果是一样的，还不如把js代码执行的次数控制在一个合理的范围之内。既能够节省浏览器CPU的资源，又能够让页面浏览起来更加的顺畅，不会因为js的执行而发生卡顿。这就是我们要将的函数节流和函数防抖要做的事情。

函数防抖是指在频繁触发的情况下，只有再有足够的空闲时间时，才执行一代码一次。比如生活中做公交车，在一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有没人刷卡了，司机才会开车。
函数节流是指在一定时间内 js 只会执行一次。比如人眨眼睛，就是一定时间内眨一次。

示例

防抖

// 简单示例
window.addEventListener('resize',function(e){
    var t;
    return function(){
        if(t) clearTimeout(t);
        t = setTimeout(function(){
            // do something...
        },500);
    }
}());

节流

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));