JavaScript 自己实现 节流 (throttle)

思路

节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

场景

• 拖拽

  • 固定时间内只执行一次，防止超高频次触发位置变动

• 缩放

  • 监控浏览器 resize

• 动画

  • 避免短时间内多次触发动画引起性能问题

实现

/**
 * @param {Function} fn
 * @param {Number} delay
 */
function throttle (fn, delay = 50) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime > delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

setInterval(throttle (() => {
  console.log(1);
}, 500), 1);