这是一个纯原生JS实现的单页搜索应用，含防抖（搜索联想）、节流（滚动加载+窗口适配）三大交互功能，结构清晰、可直接运行。
直接上一个可运行、有真实交互感的综合实战项目：一个带搜索联想 + 滚动加载 + 窗口适配的单页搜索应用。它把防抖和节流用在各自最典型的场景里，代码结构清晰，不依赖框架，纯原生 JS 实现。
一、项目结构与核心功能
页面包含三块核心区域：
- 顶部搜索栏：输入时触发防抖，300ms 后调用模拟联想接口
- 中间结果区：滚动到底部时触发节流加载（200ms 间隔内最多加载一次）
- 底部状态栏：监听窗口 resize，用节流控制布局重排（避免拖拽窗口时疯狂重绘）
二、防抖实战：搜索框输入联想
用户每敲一个字都触发 input 事件，但只在停止输入 300ms 后发请求：
[防抖] 请求联想词: ${keyword}
三、节流实战：滚动加载与窗口适配
节流推荐用「时间戳版」，更精准、无定时器堆积风险：
function throttle(fn, limit) {
let lastRun = 0;
return function(...args) {
const now = Date.now();
if (now - lastRun >= limit) {
fn.apply(this, args);
lastRun = now;
}
};
}
<p>// 滚动加载（触底检测）
const loadMore = throttle(() => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 10) {
console.log('[节流] 开始加载下一页');
// 加载逻辑：append mock data / fetch next page
}
}, 200);</p><p>// 窗口大小变化（防卡顿）
const handleResize = throttle(() => {
const width = window.innerWidth;
document.body.style.fontSize = width </p><p>window.addEventListener('scroll', loadMore);
window.addEventListener('resize', handleResize);
</p>
四、关键细节与避坑提醒
这些点实际开发中极易出错，务必注意：
-
this 和参数传递：防抖/节流函数内部必须用
apply或call绑定上下文，否则事件中的this会丢失（比如指向window） -
组件卸载清理：在 SPA 或 React/Vue 中，离开页面前要手动清除定时器或解绑事件（
clearTimeout/removeEventListener），否则内存泄漏 -
立即执行变体：搜索框首次输入想立刻响应？加个
immediate参数实现“首次立即 + 后续防抖” -
节流选型建议：时间戳版适合大多数场景；定时器版（用
setTimeout控制开关）适合需要严格对齐帧率的动画类逻辑
