深入浅出，手写节流防抖代码，展现编程功底！
2023-04-01 10:26:03
揭秘技术面试必考：节流防抖手写代码进阶指南
节流和防抖：释放编程真谛
在如今竞争激烈的求职市场中，技术面试已成为敲开高薪工作大门的一把利刃。而其中，手写节流防抖代码更是进阶编程的必考题。只有过关斩将者，方能领略到编程真谛。
节流：控制触发频率
节流，也被称为“时间戳节流”，其精髓在于设定一个时间间隔，例如 100 毫秒。在此间隔内，仅允许第一个触发事件函数运行，而丢弃后续触发的函数。这种机制有效缓解了服务器压力，防止了不必要的请求频繁发送。
防抖：延迟执行
防抖，也被称为“延迟执行”，遵循不同的原理。它同样设定一个时间间隔，比如 100 毫秒。当用户触发某个函数时，会开启一个定时器。只有在定时器到期后，该函数才会执行。此机制有效防止了函数因用户快速操作而被多次触发，避免了意外操作或页面卡顿。
手写节流防抖代码范例
理解了节流和防抖的原理后，让我们深入浅出地学习如何手写代码实现它们。
节流函数
const throttle = (func, wait) => {
let lastCall = 0;
return (...args) => {
const now = Date.now();
if (now - lastCall >= wait) {
func(...args);
lastCall = now;
}
};
};
防抖函数
const debounce = (func, wait) => {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func(...args);
}, wait);
};
};
节流防抖的应用场景
掌握了节流和防抖的原理和手写代码后，它们在实际项目中的应用场景也变得清晰起来。
节流场景
- 输入框搜索建议功能：控制请求发送频率，防止服务器压力过大。
- 窗口 resize 事件：控制 resize 事件触发频率，防止浏览器卡顿。
防抖场景
- 按钮点击事件：防止按钮被多次触发，导致意外操作。
- 滚轮事件：控制滚轮事件触发频率，防止页面卡顿。
掌握节流防抖，征服面试官
节流防抖的原理和手写代码虽然看似简单，但它们却蕴含着编程的精髓。掌握了它们的应用技巧，你就能轻松应对面试官的手写代码题目，展现出你的编程功底，为你的求职之路添砖加瓦。
常见问题解答
1. 如何判断使用节流还是防抖？
根据实际场景判断：节流适用于需要控制触发频率的情况，而防抖适用于需要延迟执行的情况。
2. 节流函数中 lastCall 变量的用途是什么？
lastCall 变量记录了上次触发函数的时间戳。与当前时间比较，可判断是否满足时间间隔要求。
3. 防抖函数中 clearTimeout 和 setTimeout 函数的作用是什么？
clearTimeout 函数用于清除之前的定时器，防止重复执行。setTimeout 函数开启一个新的定时器，在指定时间后执行函数。
4. 如何在 React 中使用节流防抖？
可以使用第三方库，如 lodash.throttle 和 lodash.debounce。也可以使用自定义 hooks 或 高阶组件 实现节流防抖。
5. 节流和防抖对性能有什么影响？
合理使用节流防抖可以优化页面性能，但过度使用会增加内存开销。因此，需要根据具体场景权衡利弊。
结语
手写节流防抖代码已成为技术面试中的必考题，它考察了求职者的编程功底和对基础原理的理解。掌握节流防抖的原理和应用场景，能够有效应对面试挑战，展现出你的编程实力和求职诚意。
