节流函数本质是限制执行频率，无法直接返回最新计算结果；需用闭包缓存参数与结果，分离计算触发（run）和同步读取（get），实现延迟更新下的实时取值。
节流函数（throttle）本身设计目标是**限制执行频率**，不是为了“返回最新计算结果”。它通常在固定时间间隔内最多执行一次，中间的调用会被忽略或缓存。所以直接让节流函数“返回最新计算结果”不符合其语义——你需要的是**带缓存与延迟更新能力的响应式计算**，更接近防抖（debounce）+ 缓存 + 同步取值的组合。
核心思路：用闭包缓存最新参数和结果
要支持“随时获取最新计算结果”，关键不是改节流逻辑，而是把计算过程和结果分离：
- 每次调用时，先更新输入参数（如最新 event、value），并触发一次异步计算（如 setTimeout 或 requestIdleCallback）
- 计算结果存入闭包变量，供外部同步读取
- 节流逻辑只控制“何时触发计算”，不阻塞结果访问
实现一个可读取最新结果的节流计算器
下面是一个实用封装，支持 .run() 触发计算、.get() 同步获取最新结果：
function throttleCompute(fn, delay) {
let lastArgs = [];
let latestResult;
let timer = null;
const run = (...args) => {
lastArgs = args;
if (!timer) {
timer = setTimeout(() => {
latestResult = fn(...lastArgs);
timer = null;
}, delay);
}
};
const get = () => latestResult;
return { run, get };
}
// 使用示例：监听鼠标移动，实时计算视口位置，但只每 100ms 更新一次
const positionCalc = throttleCompute(
(x, y) => ({ x: Math.round(x), y: Math.round(y) }),
100
);
document.addEventListener('mousemove', (e) => {
positionCalc.run(e.clientX, e.clientY);
});
// 随时读取当前已计算出的最新位置（可能略有延迟，但不会 stale）
console.log(positionCalc.get()); // { x: 321, y: 189 }
注意边界情况
这种模式有几个关键细节需留意：
-
初始值：
latestResult初始为undefined，首次get()前可能无有效值，建议初始化为默认值或加空值判断 -
立即执行需求：如果希望首次调用立刻计算（即“leading edge”），可在
run中加判断：if (!timer) { latestResult = fn(...args); }，再设定时器处理后续 -
取消待执行任务：暴露
cancel()方法可清除 pending 定时器，避免过期计算覆盖新结果
替代方案：用防抖 + 强制同步获取
如果你其实想要的是“最后一次输入后尽快得到结果，并能随时拿到它”，防抖更合适：
function debounceCompute(fn, delay) {
let lastArgs = [];
let latestResult;
let timer = null;
const run = (...args) => {
lastArgs = args;
clearTimeout(timer);
timer = setTimeout(() => {
latestResult = fn(...lastArgs);
}, delay);
};
const get = () => latestResult;
return { run, get };
}
防抖更适合用户输入类场景（如搜索框），节流更适合高频连续事件（如 scroll、resize）中做轻量同步状态快照。
