节流函数在指定时间间隔内仅执行首次触发的回调，后续调用被忽略直至间隔结束；基于时间戳实现响应及时，适用于scroll、resize等需立即响应的高频场景。
节流函数的核心是：在指定时间间隔内，只执行第一次触发的回调，后续调用被忽略，直到间隔结束后才重置状态。用闭包可以保存上一次执行的时间戳或锁定状态，避免依赖全局变量。
基于时间戳的节流（推荐）
每次触发时比较当前时间与上次执行时间的差值，大于阈值才执行并更新时间戳。
- 闭包作用：封装 lastTime 变量，对外不可见，保证状态私有
- 不使用定时器，无延迟执行，响应及时
- 适合监听 scroll、resize 等高频但需“立即响应一次”的场景
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
基于定时器的节流（可选）
首次触发立即执行，之后进入冷却期；冷却期内新触发不执行，但会记录最后一次参数，冷却结束时执行最后一次调用（类似防抖+节流混合逻辑）。不过严格节流通常不执行“最后一次”，所以更常见的是下面这种“开关式”实现：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 闭包保存 timer 和 pending 状态
- 首次触发立即执行，并启动定时器；定时器结束前所有调用被忽略
- 定时器结束后清空状态，下一次触发才能再进
function throttle(fn, delay) {
let timer = null;
return function (...args) {
if (!timer) {
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
}
注意事项与增强建议
-
this 指向：使用
fn.apply(this, args)正确绑定上下文 -
参数透传：用 rest 参数
(...args)支持任意参数数量 -
取消功能：可返回带
cancel方法的对象，清除定时器（适用于定时器版本） - leading / trailing：如需支持“开头执行”或“结尾补发”，需扩展逻辑（此时推荐用 Lodash 的 throttle 语义）
简单测试用法
绑定到滚动事件验证效果：
const handleScroll = throttle(() => {
console.log('scrolling...', Date.now());
}, 500);
<p>window.addEventListener('scroll', handleScroll);</p>
滚动过程中，控制台每 500ms 最多输出一行，符合节流预期。
