JavaScript防抖和节流

防抖

只第一次执行，后面点击都不执行

<input type="text" />
<button type="submit">click</button>
<script src="./index.js"></script>
 
<script>
  var btn = document.getElementsByTagName('button')[0];
  var input = document.getElementsByTagName('input')[0];
 
  var count = (function () {
    var i = 1;
    return function () {
      return i++;
    };
  })();
 
  // 防抖代码
  var debounce = function (fn, delay) {
    var t = null;
    return function () {
      // 如果t===null，则为第一次执行
      var firstClick = !t;
 
      if (firstClick) {
        fn.apply(this, arguments);
      }
      // 如果t有值，则取消定时器重新设置定时器计时
      if (t) {
        clearTimeout(t);
      }
      // 定时器到期后，t设置为null，则firstClick又为true
      t = setTimeout(function () {
        t = null;
      }, delay);
    };
  };
 
  function foo(e) {
    console.log('e', e);
    input.value = count();
  }
 
  btn.addEventListener('click', debounce(foo, 1000), false);
</script>

节流

每次执行需要间隔x毫秒

<input type="text" />
<button type="submit">click</button>
 
<script>
  var btn = document.getElementsByTagName('button')[0];
  var input = document.getElementsByTagName('input')[0];
 
  var count = (function () {
    var i = 1;
    return function () {
      return i++;
    };
  })();
 
 
  // 节流代码
  function throttle(fn, delay) {
    // 上次时间
    var last= 0;
 
    return function () {
      // 获取当前时间毫秒数
      var cur = new Date().getTime();
      // 如果当前时间 - 上次时间 > 间隔时间，则执行
      if (cur - last> delay) {
        fn.apply(this, arguments);
        // 保存当前时间为上次时间
        last= cur;
      }
    };
  }
 
  function foo(e) {
    console.log('e', e);
    input.value = count();
  }
 
  btn.addEventListener('click', throttle(foo, 1000), false);
 
  console.log(new Date().toLocaleDateString());
</script>