Javascript节流与防抖

笔记
Demo：
https://codepen.io/oceanzh/pen/MWWNvmZ

DeBounce 防抖

防止函数在短时间内多次调用产生的不良影响
函数经过一次调用后，马上进行的第二次调用要经过一段时间的延迟后才发出，若是延迟中收到了新的调用，则以新的调用为准并重新计算延迟
可以应用在搜索栏用户输入返回预选结果等场合， 给接受input变化的回调函数做防抖处理避免每次输入都产生请求，等用户输入完了再发请求
e.g. 技能读条，按一下重新读。只有读满了第一条放出去了，再按才能放出第二个

function debounce(fn, delay = 500) {
  let timer = null;
  return function(...params) {
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, params);
        timer = null;
      }, delay);
  };
}

// 第一次输入时会立即执行一次
function debounce(fn, delay = 500) {
  let timer = null;
  return function(...params) {
    if (timer) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, params);
        timer = null;
      }, delay);
    } else {
      fn.apply(this, params);
      timer = setTimeout(()=>{
        timer = null;
      }, delay);
    }
  };
}

Throttle 节流

在一定时间内，只能触发一次函数。如果这个时间内函数多次触发，只有一次生效。
e.g. FPS按着开枪不松手，子弹仍然是按间隔射出。

function throttle(fn, interval = 1000) {
  let last = 0;
  return function(...params) {
    const now = Date.now();

    if (now - last > interval) {
      last = now;
      fn.apply(this, params);
    }
  };
};

// 最后一次调用会在间隔后执行
function throttle(fn, interval = 1000) {
  let last = 0, deferTimer = null;
  return function(...params) {
    const now = Date.now();
    const past = now - last;
    deferTimer && clearTimeout(deferTimer);
    if (past > interval) {
      last = now;
      fn.apply(this, params);
    } else {
      deferTimer = setTimeout(() => {
        last = now;
        deferTimer = null;
        fn.apply(this, params);
      }, interval - past);
    }
  }
}

reference

https://segmentfault.com/a/11...