js---节流

前言

在活动需求中，因为做的狂点小游戏。在实际体验中就会出现，频繁的点击造成动画的不连贯，影响用户体验。并且再播放音效的时候，如果没点击一次就触发一次音效会造成将声音压入到栈中，会持续的播放。因此在这里的操作做了节流的限制，隔多少秒触发一次。总结一下节流的实现方法。

节流

节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。
根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。
节流的实现方式有两种主流的实现方式，一种是时间戳，一种是设置定时器。

使用时间戳

本次活动利用的就是该实现方式。
使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（最一开始值设为0），如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于就不执行。
具体代码如下：

function throttle(fun, wait) {
       var context,args;
       var previous = 0;
       return function () {
           var now = +new Date();//格式化时间
           context = this;
           args = arguments;
           if(now - previous > wait){
               fun.apply(context,args);
               previous = now;
           }
       }
   }

这样写法适用于，将要执行的函数直接赋值给事件。btn.addEventListener('click',throttle(addSelf,2000),false);因为throttle返回的是一个函数，直接赋值给事件可以触发执行。

如果在事件的回调中执行，就要具体修改一下。

var previous = 0;
function throttle(fun, wait) {
       var context,args;
       return function () {
           var now = +new Date();//格式化时间
           context = this;
           args = arguments;
           if(now - previous > wait){
               fun.apply(context,args);
               previous = now;
           }
       }
   }

将previous提升到外面，写法就改为btn.addEventListener('click',function () {

    throttle(addSelf,2000)();
},false);
这时throttle函数在后面要加小括号直接执行。

使用定时器

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

    function throttle(fun, wait) {
      var timeout context,args;
      return function () {
          context = this;
          args = arguments;
          if(!timeout){
              timeout = setTimeout(function () {
                timeout = null;
                fun.apply(context,args)
              },wait)
          }
      }
  }

同理如果用在回调函数中，需要将timeout提到函数外面。
使用定时器有个问题就是点击不会立即执行，需要延迟设定的时间才会执行。

比较

• 1.第一种事件会立即执行，第二种事件会在n秒后第一次执行
• 2.第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

结合这两种方法，并且可以配置是否要第一次立即执行或者停止触发后再执行一次。

直接上代码

• 配置第三个参数leading：false表明不需要第一次立即执行。trailing:false表明停止触发后不再执行最后一次。

    var previous = 0;
    var timeout;
    function throttle(fun, wait, options) {
     var context,args;
     /*var previous = 0;*/
     if(!options) options = {};

     var later = function () {
         previous = options.leading === false ? 0 :new Date().getTime();
         timeout = null;
         fun.apply(context,args);
         if(!timeout) context = args = null;
     };

     var throttled = function () {
         var now = new Date().getTime();
         if(!previous && options.leading === false) previous = now;
         var remaining = wait - (now - previous);
         context = this;
         args = arguments;
         if(remaining <= 0 || remaining > wait) {
             if(timeout){
                 clearTimeout(timeout);
                 timeout = null;
             }
             previous = now;
             fun.apply(context,args);
             if(!timeout) context = args = null;
         } else if(!timeout && options.trailing !==false){
            timeout = setTimeout(later,remaining)
         }
     };
     return throttled;
 }
 //使用 
 btn.addEventListener('click',function () {
        throttle(addSelf,2000,{trailing:false})();
    },false);

默认情况下都是兼顾了第一次点击立即触发和最后触发后执行一次。

注意

• leading：false和trailing:false不能同时设置。
• 如果同时设置的话，比如当你在不再点击的时候，因为trailing设为了false，停止触发不会设置定时器，所以只要再过了设置的时间，在点击的话，就会立即执行，就违反了leading:false了。所以该方法只有三种情况可用。