JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释

引子：昨天面试时面试官问了如何实现一个固定导航栏，在我答完后面试官问我可能存在哪些问题，如何优化？

这个问题我答得不太好，但现在回想起来应该有两个问题：

1. 把 fixbar元素 position:fixed 之后，它将脱离文档流，后面的元素将会跟上，这可能会形成一个闪烁，解决方法是跟随的元素设置 margin-top 为 fixbar 元素的高度，或者替换上一个等高的元素，这点面试时候没有描述出来。

2. 就是这篇博文主要内容 ”函数节流“，英文名 throttle 函数，在一些库，如underscore中有其实现，

主要思想是：对于非常频烦发射的事件，可以设置一定时间的”缓冲“，在这一定的时间内只执行最后一次时间的响应函数。

例如对于 窗口的滚动条拖动，onscroll时间是非常频繁发射的，如果每次发射都执行事件处理函数，那么将会增加浏览器负担，这时如果200ms(只是举例)执行一次，那么性能上将有所改善，效果上也能接受，当然实际应用需要二者找到一个平衡。

 

JQuery作者 John Resig 在2011年的一篇博文中提出了这个问题的最佳实践方法，请点击原文查看。代码如下：

    var outerPane = $details.find(".details-pane-outer"),
        didScroll = false;
     
    $(window).scroll(function() {
        didScroll = true;
    });
     
    setInterval(function() {
        if ( didScroll ) {
            didScroll = false;
            // Check your page position and then
            // Load in more results
        }
    }, 250);

 

通俗地大家把它称为 函数节流/事件稀释， 在 underscore 中，也有这个实现：

throttle_.throttle(function, wait, [options]) 
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every waitmilliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

By default, throttle will execute the function as soon as you call it for the first time, and, if you call it again any number of times during the wait period, as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass 
{trailing: false}.

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

以下是具体的实现代码：

 _.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
      previous = options.leading === false ? 0 : _.now();
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      var now = _.now();
      if (!previous && options.leading === false) previous = now;
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0 || remaining > wait) {
        clearTimeout(timeout);
        timeout = null;
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

 

参考链接：

Learning from Twitter

underscore.js