函数去抖（debounce）和 函数节流（throttle）

抖动函数和节流函数

参考

1. 带你一起来理解：函数去抖（debounce）和 函数节流（throttle）的作用和区别

抖动函数和节流函数的区别？

1. 抖动函数：强制一个函数不被重复调用直到等待指定时间已经过去并且等待期间没有被调用。例如在距离上次调用之后100毫秒后才能调用下一次函数。

2. 节流函数：节流会强制规定在单位时间内一个函数调用的最大次数。例如每过100毫秒至少执行一次这个函数。

debounce去抖

1. 定义：
   如果一个函数持续地触发，那么只在它结束后过一段时间只执行一次。

2. 使用场景

   • scroll事件（资源的加载）
   • mousemove事件（拖拽）
   • resize事件（响应式布局样式）
   • keyup事件（输入框文字停止打字后才进行校验）

const debounce = (func, wait = 16, immediate = false) => {
  let timeout, args, context, timestamp, result;
  const later = function() {
    const last = +new Date() - 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 = +new Date();
    const callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

export default debounce;

throttle节流

1. 定义
   如果一个函数持续的，频繁地触发，那么让它在一定的时间间隔后再触发。

2. 使用场景

   • click事件（不停快速点击按钮，减少触发频次）
   • scroll事件（返回顶部按钮出现\隐藏事件触发）
   • keyup事件（输入框文字与显示栏内容复制同步）
   • 减少发送ajax请求，降低请求频率

const throttle = (func, wait = 16, opts = { noStart: false, noEnd: false }) => {
  let context, args, result;
  let timeout = null;
  let previous = 0;
  const later = function() {
    previous = opts.noStart ? 0 : +new Date();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) {
      context = args = null;
    }
  };
  return function() {
    const now = +new Date();
    if (!previous && opts.noStart) {
      previous = now;
    }
    const remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      clearTimeout(timeout);
      timeout = null;
      previous = now;
      result = func.apply(context, args);
      if (!timeout) {
        context = args = null;
      }
    } else if (!timeout && !opts.noEnd) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

export default throttle;