函数防抖 和 函数节流

函数防抖 和 函数节流

函数节流

指一个函数在一定事件内只能触发一次 例如 登录验证码 过地铁闸门
间隔一段时间就运行一次的场景: 滚动加载 表单提交用的最多

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

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

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

函数防抖

指一个函数在n秒内只执行一次,如果再次点击则重新计算执行时间 例如 坐公交 排队出门
连续的是件只需触发一次的场景有: 搜索框 手机号 邮箱验证 窗口大小调整 只需要在调整完成后计算 防止重复渲染

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

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

理解： 返回一个匿名函数 利用闭包的特点 完成上一个定时器的清除! 重点是闭包的应用

函数防抖与函数节流的区别。函数防抖，将多次执行的事件合并成一次。函数节流，保持一段时间执行一次.