一、节流与防抖在本项目中的应用与封装
1. 项目中节流与防抖的应用场景
在本项目（如 web-company），节流和防抖常用于优化高频事件处理，比如搜索输入、窗口滚动、按钮点击等，防止因事件触发过于频繁导致性能问题或重复请求。
2. 已有封装（web-company/src/utils/throttleAndDebounce.ts）
throttleAndDebounce.ts 工具文件，会封装如下：
// 节流
export function throttle(fn: Function, delay: number) {
let last = 0
return function (...args: any[]) {
const now = Date.now()
if (now - last > delay) {
last = now
fn.apply(this, args)
}
}
}
// 防抖
export function debounce(fn: Function, delay: number) {
let timer: any = null
return function (...args: any[]) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
3. 应用示例
- 防抖：在
SearchBar.vue组件中，用户输入时防止频繁请求接口。 - 节流：在页面滚动监听、窗口 resize 事件等场景，防止高频触发导致性能下降。
示例：防抖搜索
import { debounce } from '@/utils/throttleAndDebounce'
const onInput = debounce((val: string) => {
// 发送搜索请求
}, 300)
二、问题
1. 问：节流和防抖的区别是什么？项目中分别用在了哪些场景？
答：
节流是指在一定时间内只执行一次函数，适合高频但不需每次都响应的场景，如滚动、resize 事件。防抖是指事件触发后延迟一段时间执行，如果期间再次触发则重新计时，适合输入框搜索、按钮防重复提交等。项目中，搜索输入用防抖，滚动监听用节流。
2. 问：你是如何在项目中封装节流和防抖函数的？
答：
我在 web-company/src/utils/throttleAndDebounce.ts 封装了通用的 throttle 和 debounce 函数，分别基于时间戳和 setTimeout 实现。这样在各个组件中都能直接引入复用，提升了代码的可维护性和一致性。
3. 问：防抖函数在搜索组件中的具体应用是怎样的？
答：
在 SearchBar.vue 组件中，用户每次输入都会触发 onInput 事件。我用 debounce 包裹搜索请求函数，只有用户停止输入 300ms 后才真正发起请求，避免了每次输入都请求接口，减少了服务器压力和无效请求。
4. 问：节流函数在页面滚动监听中的应用是怎样的？
答：
在首页或产品列表页监听 window 的 scroll 事件时，我用 throttle 包裹滚动处理函数，每 200ms 只执行一次，防止滚动事件高频触发导致页面卡顿，提升了页面的流畅性和性能。
5. 问：你如何保证节流和防抖函数的可复用性和易用性？项目中有哪些实践？
答：
我将节流和防抖函数单独封装在 utils 目录，参数设计灵活，支持传递 this 和参数。所有需要高频事件优化的地方都统一调用，避免了重复实现和潜在 bug，极大提升了项目的可维护性和开发效率。
