throttle and debounce

throttle & debounce.md

throttle 节流

定义了一个函数一段时间内的最多执行次数，比如『执行某函数最多每100ms执行一次』

type AnyFunction = (...args: any[]) => void;
const throttle = <T extends AnyFunction>(fn: T, delay: number): (...args: Parameters<T>) => void => {
  let last = 0;

  return (...args: Parameters<T>): void => {
    const now = Date.now();

    if (now - last > delay) {
      last = now;
      fn(...args);
    }
  };
};

debounce 防抖

定义了一个函数在一定时间过去再被调用。比如『执行这个函数在没有被调用的100ms之后再调用』

type AnyFunction = (...args: any[]) => void;
const debounce = <T extends AnyFunction>(fn: T, delay: number): (...args: Parameters<T>) => void => {
  let timeId: ReturnType<typeof setTimeout> | null = null;

  return (...args: Parameters<T>): void => {
    if (timeId !== null) {
      clearTimeout(timeId);
    }

    timeId = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

使用

basic

// 在 `onresize` 事件中每隔 `delay` 就会触发一次 console
window.onresize = throttle(function() {
  console.log(1)
}, 1000)

// 在停止 `onpress` 事件后隔 `delay` 触发一次 console
input.onpress = debounce(function(e) {
  console.log(e.target.value)
}, 1000)

pass params

var callback = debounce(function(xx){
    console.log(xx)
}, 1000)
window.onresize = function() {
    callback('value')
}

React Hooks

• useDebounce