js防抖与节流

防抖与节流如何实现？有哪些应用场景？

防抖：

（立即执行）触发之后立即执行，如果单位时间内再次触发，重新开始计时下次执行时间。

（非立即执行）触发之后，单位时间后执行，如果单位时间内再次触发，重新开始计时执行。

应用场景：

搜索框实时检索、输入框实时校验、滚动条事件、改变浏览器窗口事件等

/**
 * 防抖函数
 * @param { Function } cb 执行函数
 * @param { Number } delay 单位时间 默认500ms
 * @param { Boolean } immediately 是否立即执行 默认false
 */
const debounce = function (cb, delay = 500, isImmediately = false) {
  let timer = null;
  return function (...param) {
    timer && clearTimeout(timer);

    if (isImmediately) {
      !timer && cb.apply(this, param);

      timer = setTimeout(() => {
        timer = null;
      }, delay);
    } else {
      timer = setTimeout(() => {
        cb.apply(this, param);
        timer = null;
      }, delay);
    }
  };
};

节流：

单位时间内只能触发一次。

应用场景：

表单提交、上拉加载、下拉刷新等

实现方式：

/**
 * 节流函数
 * @param { Function } cb 执行函数
 * @param { Number } delay 单位时间 默认500ms
 */
const throttle = function (cb, delay = 500) {
  let start = 0;
  return function (...param) {
    let now = +new Date();
    if (now - start > delay) {
      start = now;
      cb.apply(this, param);
    }
  };
};