函数防抖及节流

183 阅读1分钟

1、函数防抖

函数防抖动是在一定时间内函数只执行一次,如果在这个时间内又触发了函数,则重新计算时间;

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

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

2、函数节流

函数节流是在一定时间内只执行一次 1)、setTimeout实现方法

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

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

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

2)、时间戳版简单实现

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();
    }
  };
};

3)、requestAnimationFrame实现方法 requestAnimationFrame的原理是浏览器每次刷新的间隔去执行函数,用该方法实现节流,即每次浏览器刷新一次执行一次函数;如每次浏览器刷新的时候执行scroll、resize方法等;