JS 手写： 节流 (throttle)

# 思路

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

# 场景

• 拖拽
  • 固定时间内只执行一次，防止超高频次触发位置变动
• 缩放
  • 监控浏览器 resize
• 动画
  • 避免短时间内多次触发动画引起性能问题

# 实现

代码语言：javascript复制

/**
 * @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);

动画 函数 监控 拖拽 原理

0 人点赞