手写throttle

1.普通版(立即执行)

javascript 复制代码
function throttle(fn, delay) {
    let start = Date.now();
    return function(...args) {
        let end = Date.now();
        if (end - start >= delay) {
            fn.apply(this, args);
            start = end;
        }
    }
}

2.延迟执行

javascript 复制代码
function throttle(fn, delay) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}

3.支持立即执行和尾调用

ini 复制代码
function throttle(fn, delay, options = {}) {
  let timerId = null;
  let lastRunTime = 0;
  const { leading = true, trailing = false } = options; // 默认立即执行,不尾调用

  return function (...args) {
    const now = Date.now();
    const remaining = delay - (now - lastRunTime);

    if (remaining <= 0) {
      // 冷却期已过,可以执行
      if (timerId) {
        clearTimeout(timerId);
        timerId = null;
      }
      if (leading) {
        fn.apply(this, args);
      }
      lastRunTime = now;
    } else if (!timerId && trailing) {
      // 处于冷却期内,且允许尾调用,设置定时器用于尾执行
      timerId = setTimeout(() => {
        fn.apply(this, args);
        lastRunTime = Date.now();
        timerId = null;
      }, remaining);
    }
  };
}
相关推荐
伯远医学2 小时前
Nat. Methods | 邻近标记技术:活细胞中捕捉分子互作的新利器
java·开发语言·前端·javascript·人工智能·算法·eclipse
不瘦80斤不改名2 小时前
JavaScript 基础语法完全指南
开发语言·javascript·ecmascript
peepeeman2 小时前
vue组件透传
前端·javascript·vue.js
a1117763 小时前
细胞结构实验室(react 开源)
前端·javascript·开源·html
Dxy12393102163 小时前
JS如何获取元素高度
开发语言·javascript·ecmascript
豹哥学前端3 小时前
5分钟搞懂事件委托
前端·javascript·面试
绝世唐门三哥4 小时前
ES6 --- import/export 全解析
开发语言·前端·javascript
yqcoder4 小时前
JavaScript 异步基石:Promise 完全指南
开发语言·前端·javascript
代码煮茶4 小时前
Vue3 上传组件实战 | 从 0 封装大文件分片上传组件(断点续传 / 秒传 / 进度条)
javascript·vue.js