关于函数防抖与函数节流

2020/05/11 前端基础原理 JavaScript

一、概念

函数防抖（debounce）：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
eg：坐公交，需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。
场景：搜索框搜索输入。只需用户最后一次输入完，再发送请求
函数节流（throttle）：限制一个函数在一定时间内只能执行一次。
eg：坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。
场景：滚动加载、表单重复提交

二、实现原理

函数防抖:

const _.debounce = (func, wait) => {
  let timer;

  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
};

函数节流:

const _.throttle = (func, wait) => {
  let timer;

  return () => {
    if (timer) {
      return;
    }

    timer = setTimeout(() => {
      func();
      timer = null;
    }, wait);
  };
};

const throttle = (func, wait) => {
  let last = 0;
  return () => {
    const current_time = +new Date();
    if (current_time - last > wait) {
      func.apply(this, arguments);
      last = +new Date();
    }
  };
};

参考：《浅析函数防抖与函数节流》

关于数据劫持与数据代理

三种类型的设计模式及其相关术语

本文作者：bbcfive