手写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);
    }
  };
}
相关推荐
CappuccinoRose6 小时前
输入事件进阶
前端·javascript·输入事件
500848 小时前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
米多科技9 小时前
让 AI 走进我的 3D 世界:一个 MCP server 的完整实现
javascript
asong9 小时前
从写代码到部署上线,Cloudflare 给 AI 配了一把新钥匙
前端·javascript·后端
lerhxx10 小时前
从 Markdown 到生成式 UI:AI 应用中的流式渲染实践
前端·javascript
可乐鸡翅yeah_10 小时前
新手梳理:HLS 线上问题,哪些该提给 CDN,哪些该找后端切片服务
开发语言·前端·javascript·vue.js·网络协议·http·m3u8在线
এ慕ོ冬℘゜11 小时前
es6基础
前端·javascript·es6
可乐鸡翅yeah_12 小时前
hls.js 缓冲区参数 maxBufferLength、maxBufferSize 通俗讲解与业务调参
开发语言·javascript·ios·音视频·safari·m3u8
paopaokaka_luck12 小时前
高校社团管理(AI辅助任务分配、协同过滤算法推荐、ECharts数据可视化、活动参与闭环、校园交流与反馈、器材借还管理)
java·前端·javascript·spring boot·数据分析·echarts
5008412 小时前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos