手写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);
    }
  };
}
相关推荐
李明卫杭州1 小时前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
七月丶1 小时前
线上出 Bug,你还在让用户"清一下缓存"?我用一个插件让每个请求自报版本
前端·javascript·面试
不简说2 小时前
JS 代码技巧 vol.3 — 10 个防抖节流深挖,小白到老炮的踩坑路
前端·javascript·面试
小智社群2 小时前
VR漫游视频完整版
前端·javascript·音视频
nicole bai3 小时前
vue 自定义模块内容
前端·javascript·vue.js
西西学代码3 小时前
Flutter---StreamBuilder案例
javascript·windows·flutter
何时梦醒5 小时前
🤖 RAG 文档分割器(Splitter)深度学习笔记 —— 从零搭建知识库文档处理流水线
前端·javascript·人工智能
ss2735 小时前
Vue 完整版本发展史时间线(2013–2026)|版本迭代里程碑+核心特性对照表
前端·javascript·vue.js
用户938515635075 小时前
知识库预处理实战:从URL加载到语义分块的全链路解析
javascript·人工智能·全栈
weedsfly6 小时前
前端开发中的命令模式——从点餐退单到异步任务调度
前端·javascript·面试