要实现节流取消后重置，核心做法是在 cancel 方法中清除定时器并立即执行最后一次回调。这样在停止触发后，函数会立刻完成剩余的执行逻辑，而不是等待下一个周期。
如何实现带 cancel 的节流函数
直接回答：通过返回一个包含 cancel 方法的包装函数来实现。在 cancel 内部调用 clearTimeout 清除待执行的定时器，并手动调用一次用户传入的 func，从而将“延迟执行”变为“立即执行”。
function throttle(func, wait) {
let timeout = null;
let lastExecTime = 0;
const throttled = function(...args) {
const now = Date.now();
const remaining = wait - (now - lastExecTime);
if (remaining <= 0) {
// 时间窗口已过，立即执行
func.apply(this, args);
lastExecTime = Date.now();
} else if (!timeout) {
// 时间窗口未过，设置定时器
timeout = setTimeout(() => {
func.apply(this, args);
lastExecTime = Date.now();
timeout = null;
}, remaining);
}
};
// 新增 cancel 方法
throttled.cancel = function() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
// 关键：立即执行最后一次回调
func.apply(this, arguments);
lastExecTime = Date.now();
};
return throttled;
}预期结果：调用 throttled.cancel() 后，如果之前有等待中的定时器被清除，且 func 会被立即调用一次。这确保了在事件停止（如鼠标离开）时，处理逻辑能立刻生效。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
为什么需要重置 lastExecTime
直接回答：在 cancel 中重置 lastExecTime 是为了防止下一次触发时出现意外的延迟或重复执行。如果不重置，新的触发可能会因为计算出的 remaining 时间不正确而导致行为异常。
// 验证场景：快速连续触发后取消
const log = console.log;
const myThrottle = throttle(log, 500);
// 模拟第一次触发
myThrottle('first'); // 立即输出 'first'
// 模拟第二次触发（在 500ms 内）
setTimeout(() => {
myThrottle('second'); // 设置定时器，等待 500ms
}, 100);
// 模拟取消操作
setTimeout(() => {
myThrottle.cancel(); // 清除定时器，立即输出 'second'
}, 200);
// 模拟第三次触发（在 cancel 之后）
setTimeout(() => {
myThrottle('third'); // 应该立即输出 'third'，因为 lastExecTime 已更新
}, 300); 预期结果：控制台依次输出 'first', 'second', 'third'。如果没有重置 lastExecTime，第三次触发可能会因为 lastExecTime 还是旧值而被错误地推迟或跳过。
基于 cancel 后立即执行的具体问题
直接回答：当用户在输入框中输入内容时，如果频繁触发搜索，我们希望用户在停止输入的瞬间（例如点击了其他区域导致 blur），能够立即发送最后一次请求，而不是等待下一个节流周期。
在实际场景中，比如搜索框的 blur 事件可以触发 cancel。这样用户在离开输入框时，最后输入的关键词会立即被搜索，提升用户体验。代码实现上，只需在 blur 监听器中调用 throttledSearch.cancel() 即可。
