throttle_simple

a simple example of throttle

by Zhou Shen

HTML

<button id="btn">click</button>
<div id="display"></div>

JavaScript

/**
 * 创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔delay毫秒调用一次该函数
 * @param fn 执行函数
 * @param delay 时间间隔
 * @param options 如果你想禁用第一次首先执行的话，传递{leading: false}，
 *                如果你想禁用最后一次执行的话，传递{trailing: false}
 * @returns {Function}
 */
function throttle(fn, delay, options) {
  var timer = null;
  var timeStamp = new Date();
  return function() {
    var context = this; //获取函数所在作用域this
    var args = arguments; //取得传入参数
    if (new Date() - timeStamp > delay) {
      timeStamp = new Date();
      fn.apply(context, args);
    }

  }
}

/* 方法执行 */
var btn = document.getElementById('btn');
var el = document.getElementById('display');
var init = 0;
btn.addEventListener('click', throttle(function() {
  init++;
  el.innerText = init;
}, 1000));