防抖和节流

节流和防抖是为了限制函数触发频率而产生的，主要运用了函数的闭包，多使用三方库如lodash中的方法实现所需效果。

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。会导致函数被延迟执行。使用高阶函数，返回一个被定时器包裹的新函数，此函数在指定时间内若触发多次会导致上一次的函数不执行。

• input框根据输入内容变化实时搜索的时候使用较多，用户停止输入后指定时间不再输入才会调用函数，节约请求资源。

const debounce = (fn, delay) => {
  let handle = null;
  return (...rest) => {
    if (handle) {
      // 取消之前的延时调用
      clearTimeout(handle);
    }
    handle = setTimeout(() => {
      fn.apply(this, rest);
    }, delay);
  }
}

返回一个promise的防抖

• 可用于antd form的自定义校验validator场景。

// 返回一个promise函数的debounce
const promiseDebounce = (fn, delay) => {
  let handle = null;
  return (...rest) => {
    if (handle) {
      // 取消之前的延时调用
      clearTimeout(handle);
    }
    return new Promise((resolve) => {
      handle = setTimeout(() => {
        resolve(fn.apply(null, rest));
      }, delay);
    });
  };
}

节流

指定时间段内触发多次函数，只有一次生效。固定时间内函数只执行一次，但不会导致函数延迟执行。

• 监听缩放、滚动等场景建议使用。

// 使用时间间隔来判断
const throttle = (fn, delay) => {
  let preT = 0;
  return (...rest) => {
    const currT = new Date();
    if(currT - preT > delay) {
      fn.apply(this, rest);
      preT = currT;
    }
  }
}