手写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 小时前
浏览器AI肯定离不开onnxruntime, 微软开源
前端·javascript·后端
码视野2 小时前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野2 小时前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
CarIise2 小时前
JavaScript基础语法与DOM操作实战课堂笔记
开发语言·javascript·笔记
Su米苏3 小时前
针对使用@vue-office 出现的包异常找不到问题
前端·javascript·vue.js
坚定信念,勇往无前3 小时前
electron打包mac ,apple m4出错:ffprobe是x86,不是arm64
前端·javascript·electron
专业抄代码选手3 小时前
01|从手写 DOM 到虚拟 DOM:把 UI 从“操作”变成“描述”
前端·javascript·react.js
专业抄代码选手3 小时前
03|React 为什么需要协调:比较两棵树,而不是重建页面
前端·javascript·react.js
王霸天4 小时前
GLB 文件太大怎么办?我把它从 47MB 压到 8MB,全程没碰命令行
前端·javascript·程序员
胡萝卜术4 小时前
权限系统的四道防线:从数据库事务锁到操作级保护规则的完整设计
前端·javascript·面试