节流

2017-12-16

摘要：冴羽的博客学习节流
两种主流的方法实现节流：
1.使用时间戳
2.设置定时器

时间戳

原理：如果两次触发的时间戳差值大于设定的时间间隔就执行函数，否则，不执行；并且将初始值设为0，保证第一次触发时能够执行函数

var container = document.getElementById('container');
function active() {
  // 执行代码
}
function throttle(callback, wait) {
  var context;
  var args;
  var previous = 0;
  return function () {
    var now = + new Date(); // 获取当前时间戳
    context = this;
    args = arguments;
    if (now - previous > wait) {
      callback.apply(context, args); // 将this指向触发的对象执行函数并传递event对象
      previous = now; // 更新上一次触发的时间戳
    }
  }
}
// 调用
container.onmousemove = throttle(active, 1000);

可以看出：使用时间戳进行节流是触发事件时就立即进行判断现在是否执行回调函数

定时器

原理：触发事件时设定一个定时器，过一定时间后定时器生效，将 timeout 值清除并执行回调函数，当定时器存在时就不执行函数

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

可以看出：使用定时器进行节流是触发事件后等待一段时间才会执行回调函数

加强版

希望能够在触发事件时立即执行一次函数，在停止触发事件后再执行一次函数，每次执行函数的间隔是一定的，而且还可以取消执行

function throttle(callback, wait) {
  var timeout;
  var context;
  var args;
  var previous = 0;
  var later = function () {
    timeout = null;
    previous = + new Date();
    callback.apply(context, args);
  };
  var throttled = function () {
    var now = + new Date();
    var remaining = wait - (now - previous); // 还需等待的时间
    context = this;
    args = arguments;
    // 当两次触发的时间差不小于设定的时间或者将系统时间调到了上次触发之前，就立即执行函数
    // 如果不是立刻执行，就需要重设定时器
    if (remaining <= 0 || remaining > wait) {
      // 立即执行函数需要将之前的定时器清除
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = + new Date();
      callback.apply(context, args);
    } else {
      // 避免每次重设定时器都重新创建匿名函数，将函数提出来
      clearTimeout(timeout);
      timeout = setTimeout(later, remaining);
    }
  };
  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = null;
  };
  return throttled;
}
// 调用
var throttleActive = throttle(active, 1000);
container.onmousemove = throttleActive;
// 调用cancel方法即可取消throttle函数
// throttleActive.cancel();

定制版

想要可以控制触发时是否立即执行函数和停止触发后是否再执行一次函数
可以通过第三个参数options对象传递配置项来进行判断：
leading：false 表示禁用第一次执行
trailing: false 表示禁用停止触发的回调

function throttle(callback, wait, options) {
  var timeout;
  var context;
  var args;
  var previous = 0;
  if (!options) { // 没有配置项时默认两者都有
    options = {};
  }
  var later = function () {
    // 当一系列触发动作停止超过设定时间后又一系列触发需要跳过第一次执行，因而要将previous初始化为0 
    previous = options.leading === false ? 0 : new Date().getTime();
    timeout = null;
    callback.apply(context, args);
  };
  var throttled = function () {
    var now = + new Date();
    // 当第一次触发previous为0，并且禁用第一次执行时要将第一次执行跳过
    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 = + new Date();
      callback.apply(context, args);
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
  };
  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = null;
  };
  return throttled;
}
// 只有三种调用情况
var throttleActive = throttle(active, 1000);
// var throttleActive = throttle(active, 1000, {leading: false});
// var throttleActive = throttle(active, 1000, {trailing: false});
container.onmousemove = throttleActive;
// 调用cancel方法即可取消throttle函数
// throttleActive.cancel();

注意：两者不能同时为false。因为都为false时，最后一次执行函数后previous并没有清零，当过了设定的时间再触发就会使remaining小于0，回调函数立刻执行