全局事件监听添加节流防抖

<think>好的，用户现在想知道如何在全局事件监听中添加节流和防抖功能，特别是在JavaScript或前端框架中的应用。我需要结合之前的回答和提供的引用资料来组织这个回答。 首先，用户之前的问题是关于获取cookie的有效期，我回答了相关方法，现在转向事件监听中的节流和防抖。这可能是因为用户在开发中遇到了性能问题，比如频繁触发的事件导致页面卡顿，所以想优化。 用户提到的全局事件监听，可能是指window对象上的事件，比如resize、scroll、mousemove等。这些事件通常会频繁触发，不加处理的话会影响性能。根据引用[1]、[2]、[3]中的内容，节流和防抖分别适用于不同场景：防抖用于连续事件后的最后一次触发，比如输入验证；节流用于固定间隔执行，比如滚动加载。 接下来需要解释如何在全局事件中实现这两种函数。首先，应该给出JavaScript原生实现，因为用户可能没有使用框架。例如，用addEventListener绑定事件，并用节流或防抖函数包装回调。需要提供代码示例，比如防抖和节流函数的定义，然后如何应用到window的resize事件上。 然后，考虑到用户可能使用前端框架，如React或Vue，需要分别说明在这些框架中的实现方式。比如，React中可以在useEffect钩子中添加事件监听，并在清理函数中移除，同时使用useCallback来记忆化处理函数。Vue中则可能在mounted生命周期钩子中添加，使用lodash的防抖节流方法，并在beforeUnmount中移除。 还需要提到使用第三方库如lodash，方便用户快速实现，避免自己写函数可能出现的错误。引用[3]中提到了lodash的使用，所以这里可以推荐。 另外，要注意事件监听的移除，防止内存泄漏。特别是在框架中，组件卸载时需要正确清理。还要强调根据场景选择防抖或节流，比如resize可能更适合防抖，而scroll适合节流。 最后，生成相关问题，帮助用户深入理解，比如区别、框架中的注意点、错误处理等。 检查是否覆盖了所有关键点：原生JS实现、框架中的实现、第三方库、注意事项、相关问题。确保结构清晰，代码正确，引用合适的参考文献。例如，引用[2]中的防抖函数，引用[1]中的节流示例，引用[3]中的使用场景。</think>### 全局事件监听中实现节流与防抖 在全局事件监听中应用节流（Throttle）和防抖（Debounce）是前端性能优化的核心手段，尤其适用于高频触发的事件（如 `resize`、`scroll`、`mousemove`）。以下是具体实现方法及适用场景： --- #### **一、原生 JavaScript 实现** 通过原生 JavaScript 绑定全局事件时，需将事件处理函数用节流/防抖函数包裹，控制触发频率。 ##### 1. **防抖（Debounce）** **适用场景**：窗口调整（`resize`）、输入验证（`input`）、表单提交（`submit`）[^2][^4]。 **实现**：仅在事件停止触发后执行一次回调。 ```javascript // 防抖函数（引用[2]的实现） function debounce(fn, delay = 300) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); timer = null; }, delay); }; } // 全局监听窗口调整事件（防抖） window.addEventListener('resize', debounce(() => { console.log('窗口大小调整完成'); }, 500)); ``` ##### 2. **节流（Throttle）** **适用场景**：滚动加载（`scroll`）、拖拽（`mousemove`）、高频点击（`click`）[^1][^3]。 **实现**：固定时间间隔内只执行一次回调。 ```javascript // 节流函数（引用[1]的实现） function throttle(fn, delay = 300) { let canRun = true; return function(...args) { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, args); canRun = true; }, delay); }; } // 全局监听滚动事件（节流） window.addEventListener('scroll', throttle(() => { console.log('滚动中，每秒触发一次'); }, 1000)); ``` --- #### **二、前端框架中的应用** ##### 1. **React** 在 `useEffect` 中绑定事件，通过 `useCallback` 缓存处理函数以避免重复渲染： ```javascript import { useEffect, useCallback } from 'react'; function App() { const handleResize = useCallback(debounce(() => { console.log('防抖后的窗口调整'); }, 500), []); useEffect(() => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [handleResize]); return <div>内容</div>; } ``` ##### 2. **Vue** 在 `mounted` 生命周期中绑定事件，使用 Lodash 工具库简化实现[^3]： ```javascript import { debounce } from 'lodash'; export default { mounted() { this.debouncedScroll = debounce(() => { console.log('滚动防抖处理'); }, 300); window.addEventListener('scroll', this.debouncedScroll); }, beforeUnmount() { window.removeEventListener('scroll', this.debouncedScroll); } }; ``` --- #### **三、注意事项** 1. **内存泄漏**：框架中需在组件卸载时移除事件监听（如 React 的 `useEffect` 清理函数、Vue 的 `beforeUnmount`）。 2. **参数传递**：若事件处理函数需要事件对象（`event`），需确保防抖/节流函数正确传递参数（如 `...args`）。 3. **性能权衡**： - 防抖的 `delay` 过长会导致响应延迟； - 节流的 `delay` 过短可能无法有效降低触发频率。 --- #### **四、工具库推荐** 使用 Lodash 提供的 `_.debounce` 和 `_.throttle` 可直接实现标准化功能[^3]： ```javascript import { debounce, throttle } from 'lodash'; // Lodash 防抖 window.addEventListener('resize', debounce(handleResize, 500)); // Lodash 节流 window.addEventListener('scroll', throttle(handleScroll, 1000)); ``` --- ### 相关问题 1. **防抖与节流的本质区别是什么？如何根据场景选择？** 2. **在 React Hooks 中使用防抖时，为什么需要用 `useCallback` 包裹？** 3. **如何避免全局事件监听导致的内存泄漏问题？** 4. **Lodash 的 `debounce` 函数是否支持立即执行（leading edge）？如何配置？** [^1]: 节流函数适用于拖拽、缩放等高频触发场景 [^2]: 防抖函数通过延迟执行避免多次误触发 [^3]: Lodash 工具库提供标准化防抖/节流实现 [^4]: 防抖在表单输入中可减少无效请求