vue前端面试题 防抖节流

### 关于 Vue.js 面试题中的防抖和节流 #### 一、防抖函数实现与原理 防抖的核心在于延迟执行某个操作，直到一定时间内不再触发该事件才会执行回调。以下是基于 JavaScript 的简单防抖函数实现： ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; // 解决this指向问题 clearTimeout(timeout); // 清除之前的定时器 timeout = setTimeout(() => func.apply(context, args), wait); }; } ``` 此代码片段解决了 `this` 指向问题[^1]，并允许传递额外参数给原函数。 #### 二、节流函数实现与原理 节流则是控制某段时间内只允许执行一次特定的操作。下面是一个简单的节流函数实现： ```javascript function throttle(func, limit) { let inThrottle; return function (...args) { const context = this; // 同样解决this指向问题 if (!inThrottle) { inThrottle = true; func.apply(context, args); setTimeout(() => (inThrottle = false), limit); } }; } ``` 这段代码确保了在指定的时间间隔内只会调用一次函数[^4]。 #### 三、Vue 中的应用场景 在 Vue.js 开发中，常见的应用场景包括输入框的实时搜索功能、窗口大小调整监听等。例如，在组件的方法中定义一个防抖处理程序可以有效减少不必要的渲染次数： ```javascript export default { data() { return { searchQuery: '' }; }, methods: { handleSearchDebounced: debounce(function(event) { console.log('实际查询:', event.target.value); }, 500), onInputChange(event) { this.handleSearchDebounced(event); } } }; ``` 这里展示了如何利用自定义的防抖函数来优化用户的输入体验[^2]。 对于节流而言，它通常用于防止频繁触发某些昂贵的操作，比如滚动或者拖拽事件。同样可以在 Vue 方法里这样写： ```javascript methods: { handleScrollThrottled: throttle(function() { console.log('页面被滚动'); }, 300) }, mounted() { window.addEventListener('scroll', this.handleScrollThrottled); }, beforeDestroy() { window.removeEventListener('scroll', this.handleScrollThrottled); } ``` 以上例子说明了如何绑定带有节流效果的事件监听器到全局对象上，并记得清理它们以避免内存泄漏[^3]。 #### 四、推荐使用的第三方库 考虑到生产环境下的复杂需求，建议使用成熟的工具库如 Lodash 提供的功能更完善的版本。可以通过如下方式快速集成至项目当中： ```bash npm install lodash ``` 之后就可以很方便地引用其内置方法来进行开发工作了。 --- ###