今天我们来说一说这个函数截流，以前写代码的时候只是为了达到目的以及实现效果并没有更多的考虑性能，函数截流说起来那么高大上，那么到底什么地方我们才会用到呢？ 当平凡发生对 dom 操作的时候，这个时候就会影响整个页面的性能造成页面卡顿等等。 javascript%e6%88%aa%e6%b5%81-gif 下面看看我们使用函数截留后页面的效果 最近从新改版和搭建自己的博客 优化了自己的弹出框组件 这其中使用到了组件化和模块化的思想 结合 requirejs 管理包 velocity.js 来实现动画效果（为什么不使用 css3 ？当然我也是不反对的，最重要的是兼容性） 低版本浏览器下面也能够观察到效果 关于其它优雅降级等暂时没有做考虑 因为这个博客只是技术方面所以肯定要抛弃一些个浏览器比如说 ie9 id10 以下的浏览器 大部分看这博客的人我想也是技术方面的 用的那肯定是谷歌火狐 safri 等现代浏览器。所以一开始 我的目标群体不是全部受众

说到这里我们来说说什么事函数截流？

在前端开发中，有时会为页面绑定 resize 事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定 mousemove），这种事件有一个特点，就是用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道，DOM 操作时很消耗性能的，这个时候，如果你为这些事件绑定一些操作 DOM 节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。甚至在 IE 下，如果你绑定的 resize 事件进行较多 DOM 操作，其高频率可能直接就使得浏览器崩溃。 怎么解决？函数节流就是一种办法。话说第一次接触函数节流(throttle)，还是在看 impress 源代码的时候，impress 在播放的时候，如果窗口大小发生改变(resize)，它会对整体进行缩放(scale)，使得每一帧都完整显示在屏幕上 稍微留心，你会发现，当你改变窗体大小的时候，不管你怎么拉，怎么拽，都没有立刻生效，而是在你改变完大小后的一会儿，它的内容才进行缩放适应。看了源代码，它用的就是函数节流的方法。 函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。以 impress 上面的例子讲，就是让缩放内容的操作在你不断改变窗口大小的时候不会执行，只有你停下来一会儿，才会开始执行。

函数节流的原理

函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个时间时，先 setTimout 让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就 clear 掉原来的定时器，再 setTimeout 一个新的定时器延迟一会执行，就这样。

代码实现

明白了原理，那就可以在代码里用上了，但每次都要手动去新建清除定时器毕竟麻烦，于是需要封装。在《JavaScript 高级程序设计》一书有介绍函数节流，里面封装了这样一个函数节流函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
throtle:function(fn,delay){
    var _self = fn,timer,firstTime=true;
    return function(){
        var args =arguments,
            _me  = this;
        if(firstTime){
            _self.apply(_me,args);
            return firstTime = false;
        }
        if(timer){
            return false;
        }
        timer = setTimeout(function(){
            clearTimeout(timer);
            timer = null;
            _self.apply(_me,args);
        },delay500);//默认500毫秒延迟
    }
}