前端: JavaScript: 防抖与节流--debounce & throttle about blog

[xvno]

debounce

防抖 - debounce 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn, wait=300) {
    let timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(null, args);
        }, wait);
    }
}

[xvno]

throttle

节流 - throttle 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。(没有做排他处理, 即虽然第一次未完成, 到期后仍然可以出发第二次)

function throttle(fn, wait) {
    let flag = true;
    return function (...args) {
        if (flag) {
            flag = false;
            setTimeout(() => {
                flag = true;
            }, wait);
            fn.apply(null, args);
        }
    }
}

[xvno]

看一下 underscore 怎么做的

整体看来, 代码比较啰嗦

  _.debounce = function (func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function () {
      var last = _.now() - timestamp;

      if (last < wait && last >= 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        timeout = null;
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };

    return function () {
      context = this;
      args = arguments;
      timestamp = _.now();
      var callNow = immediate && !timeout;
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  };

唯一的长处就是增加了immediate, 这个也容易实现.

  _.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) {
        if (timeout) {
          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;
    };
  };