JS代码-蚂蚁金服前端面试题目1：debounce的简易实现
5星
- 浏览量: 0
- 大小:None
- 文件类型：ZIP
简介：
本文介绍了如何在前端开发中实现防抖（debounce）函数，这是蚂蚁金服面试中的一个问题。适合前端工程师参考学习。
JavaScript中的`debounce`函数是一种优化技术，在处理频繁触发的事件如窗口滚动、输入或页面重绘时特别有用。该函数通过限制特定时间内执行次数来提高性能并减少不必要的计算。
当一个事件被多次触发，比如连续快速地移动鼠标或者不断按键时，使用`debounce`可以确保相关操作只在最后一次触发后的一段静默期内执行一次。这样可以避免短时间内重复调用导致的资源浪费和用户体验下降。
下面是一个简单的`debounce`函数实现：
```javascript
function debounce(func, wait) {
let timeoutId;
return function() {
const context = this; // 保留上下文
const args = arguments; // 保存参数
clearTimeout(timeoutId); // 清除已有的定时器
timeoutId = setTimeout(function() {
func.apply(context, args); // 在wait毫秒后执行原函数
}, wait);
};
}
```
在这个实现中，`func`代表需要防抖的函数，而`wait`则是等待时间（以毫秒为单位）。每当事件被触发时，都会创建一个新的定时器，并取消旧有的。只有当最后一次触发后的静默期没有新的事件发生时才会执行该函数。
例如，在一个搜索框的keyup事件中使用此方法可以延迟发送请求：
```javascript
const searchInput = document.querySelector(input[type=search]);
const searchDebounced = debounce(() => {
执行搜索逻辑
console.log(Debounced search:, searchInput.value);
}, 300);
searchInput.addEventListener(keyup, searchDebounced);
```
这里，当用户停止输入后经过了300毫秒没有新的按键事件时才会触发实际的搜索操作。这种方法有助于提升用户体验和减少服务器负载。
在实践中，`debounce`函数还有其他变种及优化版本如立即执行模式或节流模式等，但其核心思想都是控制函数调用频率来改善性能与效率。对于前端开发人员来说，在面试时被问到关于如何使用此技术的问题是常见的事情，因为这直接关系到应用的性能和用户体验。
全部评论 (0)
