网站的建设多少钱建设银行指定网站

网站的建设多少钱,建设银行指定网站,seo自然优化排名,做校园网站 怎么备案防抖#xff08;Debounce#xff09;与节流#xff08;Throttle#xff09;的源码级实现#xff1a;支持立即执行与取消功能 大家好#xff0c;今天我们来深入探讨两个在前端开发中极其重要但又常被误解的性能优化技术#xff1a;防抖#xff08;Debounce#xff09;…防抖Debounce与节流Throttle的源码级实现支持立即执行与取消功能大家好今天我们来深入探讨两个在前端开发中极其重要但又常被误解的性能优化技术防抖Debounce和节流Throttle。它们广泛应用于搜索框输入、窗口缩放、滚动事件监听等高频触发场景目的是减少不必要的函数调用提升用户体验和系统性能。本讲座将从理论出发逐步推导出它们的核心逻辑并提供完整可运行的源码级实现包括支持“立即执行”选项支持“取消”操作即手动中断定时器代码结构清晰、注释详尽、易于扩展一、什么是防抖和节流1. 防抖Debounce定义在一段时间内连续触发事件时只在最后一次触发后等待指定延迟时间再执行一次回调函数。适用场景用户在搜索框中输入内容希望每停顿1秒后再发起请求。实时表单校验避免频繁 API 调用。核心思想延时执行 清除旧任务2. 节流Throttle定义规定一个时间段内最多只执行一次回调函数无论期间触发多少次事件。适用场景窗口 resize 或 scroll 事件处理防止页面卡顿。滚动加载更多数据限制频率。核心思想固定间隔执行 控制节奏二、为什么需要防抖和节流想象这样一个场景window.addEventListener(scroll, () { console.log(滚动了); });如果用户快速滚动页面可能会触发成百上千次scroll事件。每次打印日志可能只是调试用途但如果换成请求接口、重绘 DOM 或计算复杂逻辑就会造成严重的性能问题 —— 浏览器卡顿甚至崩溃。解决方案就是使用Debounce / Throttle来控制执行频率。三、核心区别对比表格总结特性防抖Debounce节流Throttle触发方式最后一次触发后延迟执行固定周期内只执行一次是否立即执行可配置不会立即执行除非设置立即执行执行时机停止触发后才执行每隔固定时间执行适用场景输入框搜索、实时验证滚动/缩放监听、鼠标移动是否可取消支持支持通过 clearTimeout注意两者都能通过clearTimeout实现取消功能这是很多初学者忽略的关键点。四、源码级实现详解带注释我们分别实现两个高阶函数debounce和throttle并支持以下特性immediate: boolean—— 是否立即执行cancel(): void—— 取消当前待执行的任务返回值是一个函数对象包含上述方法1. 防抖Debounce实现function debounce(fn, delay 300, immediate false) { let timeoutId null; function debounced(...args) { // 如果已经存在定时器则清除它防抖核心逻辑 if (timeoutId) clearTimeout(timeoutId); // 如果设置了立即执行且是第一次调用 if (immediate !timeoutId) { fn.apply(this, args); // 立即执行 } // 设置新的定时器在 delay 后执行 fn timeoutId setTimeout(() { timeoutId null; // 清空状态 if (!immediate) { fn.apply(this, args); } }, delay); } // 添加 cancel 方法用于取消当前待执行的任务 debounced.cancel function() { if (timeoutId) { clearTimeout(timeoutId); timeoutId null; } }; return debounced; }关键点说明timeoutId是全局唯一标识符用于管理定时器。immediate控制是否在首次调用时立刻执行。cancel()方法允许外部主动终止未完成的防抖任务比如组件卸载时。使用apply保证this上下文正确传递给原函数。示例演示const searchHandler debounce((query) { console.log(搜索 ${query}); }, 500, true); // 立即执行模式 searchHandler(a); // 立即输出搜索 a searchHandler(ab); // 清除上一个定时器重新计时 searchHandler(abc); // 再次清空继续等待 // 500ms 后无新调用 → 输出搜索 abc searchHandler.cancel(); // 主动取消最后的等待任务2. 节流Throttle实现function throttle(fn, delay 300, options {}) { const { leading true, trailing true } options; let lastTime 0; let timeoutId null; function throttled(...args) { const now Date.now(); // 第一次调用或距离上次执行超过 delay if (lastTime 0 || now - lastTime delay) { if (leading) { fn.apply(this, args); } lastTime now; } else { // 如果不是 leading且 trailing 为 true则设置尾部延迟执行 if (trailing !timeoutId) { timeoutId setTimeout(() { timeoutId null; fn.apply(this, args); lastTime Date.now(); }, delay - (now - lastTime)); } } } // 取消方法清除定时器并重置状态 throttled.cancel function() { if (timeoutId) { clearTimeout(timeoutId); timeoutId null; } lastTime 0; }; return throttled; }关键点说明leading控制是否在第一次调用时立即执行默认 true。trailing控制是否在最后一次调用后延迟执行默认 true。lastTime记录上次执行的时间戳用于判断是否满足间隔条件。trailing的实现稍微复杂一点当事件密集发生时最后一个事件会被延迟执行模拟“尾部执行”行为。示例演示const handleScroll throttle((event) { console.log(滚动事件触发, event.type); }, 1000, { leading: true, trailing: true }); // 快速触发多次 scroll handleScroll({ type: scroll }); // 立即执行 handleScroll({ type: scroll }); // 忽略未满1s handleScroll({ type: scroll }); // 忽略 setTimeout(() handleScroll({ type: scroll }), 800); // 还没到1s不会执行 setTimeout(() handleScroll({ type: scroll }), 1200); // 超过1s再次执行 // 如果想取消handleScroll.cancel();五、进阶技巧封装为类更易管理有时候我们需要对多个防抖/节流函数进行统一管理和清理如 React 组件卸载时。我们可以将其封装为类class Debouncer { constructor(delay 300, immediate false) { this.delay delay; this.immediate immediate; this.timeoutId null; } run(fn, ...args) { if (this.timeoutId) clearTimeout(this.timeoutId); if (this.immediate !this.timeoutId) { fn.apply(this, args); } this.timeoutId setTimeout(() { this.timeoutId null; if (!this.immediate) { fn.apply(this, args); } }, this.delay); } cancel() { if (this.timeoutId) { clearTimeout(this.timeoutId); this.timeoutId null; } } } class Throttler { constructor(delay 300, options {}) { this.delay delay; this.leading options.leading ?? true; this.trailing options.trailing ?? true; this.lastTime 0; this.timeoutId null; } run(fn, ...args) { const now Date.now(); if (this.lastTime 0 || now - this.lastTime this.delay) { if (this.leading) fn.apply(this, args); this.lastTime now; } else { if (this.trailing !this.timeoutId) { this.timeoutId setTimeout(() { this.timeoutId null; fn.apply(this, args); this.lastTime Date.now(); }, this.delay - (now - this.lastTime)); } } } cancel() { if (this.timeoutId) { clearTimeout(this.timeoutId); this.timeoutId null; } this.lastTime 0; } }这样可以在组件中轻松维护多个任务class MyComponent { constructor() { this.debounceSearch new Debouncer(500, true); this.throttleResize new Throttler(300, { leading: true, trailing: true }); } onSearch(query) { this.debounceSearch.run(console.log, query); } onResize(event) { this.throttleResize.run(console.log, event); } destroy() { this.debounceSearch.cancel(); this.throttleResize.cancel(); } }六、常见误区澄清误区正确理解“防抖一定会延迟执行”错若设置了immediatetrue首次调用会立即执行“节流就是每隔一段时间执行一次”不准确还要看leading和trailing参数如何配置“防抖适合所有高频事件”不一定如果用户希望每次都有反馈如游戏键盘输入应慎用防抖“取消函数只能靠 clearTimeout”对但要确保保存了定时器引用如上面的timeoutId七、性能测试建议实际项目中可用你可以用如下方式简单测试两者差异const start performance.now(); function testDebounce() { const d debounce(() {}, 100); for (let i 0; i 100; i) { d(); } console.log(防抖耗时:, performance.now() - start); } function testThrottle() { const t throttle(() {}, 100); for (let i 0; i 100; i) { t(); } console.log(节流耗时:, performance.now() - start); }你会发现防抖最终只会执行一次即使调用了100次节流大约每100ms执行一次共约10次左右取决于具体实现细节八、结语何时选哪个场景推荐策略输入框搜索、自动补全防抖immediatefalse实时语音识别、打字速度统计节流leadingtrue, trailingfalse滚动加载分页节流leadingtrue, trailingtrue表单字段校验防抖immediatetrue自动保存草稿防抖immediatetrue大量DOM操作如拖拽节流leadingtrue最佳实践建议明确需求你想要的是“停止后才响应”还是“固定频率响应”使用cancel()在组件销毁或页面离开时释放资源避免内存泄漏。若需复用推荐封装成工具函数或类便于维护。总结今天我们不仅讲清楚了防抖和节流的本质区别还给出了生产级源码实现涵盖了立即执行选项immediate取消功能cancel完整的类型提示和文档风格类封装形式便于管理多个任务这些代码可以直接集成进你的项目中无论是 Vue、React 还是原生 JS 应用都适用。记住一句话“好的性能不是靠堆硬件而是靠聪明地控制事件流。”希望今天的分享对你有帮助欢迎留言交流你的实战经验