js代码-手写js节流

JavaScript中的“节流”(Throttling)是一种优化技术，用于限制函数执行的频率，以防止在用户交互频繁时（如滚动事件、窗口resize事件）过度消耗系统资源。本篇文章将深入探讨JavaScript手写节流函数的核心原理和实现方式。 节流主要有两种策略：固定时间间隔节流和依赖事件间时间间隔节流。固定时间间隔节流是指在一段时间内，无论触发多少次事件，函数只执行一次。依赖事件间时间间隔节流则是在两次事件之间设定一个最小时间间隔，只有当这个间隔过去后，新触发的事件才会执行函数。 下面我们将详细讲解如何手写这两种节流函数。 ### 一、固定时间间隔节流 ```javascript function throttle(fn, delay) { let timeoutId; return function() { const context = this; const args = arguments; if (!timeoutId) { fn.apply(context, args); timeoutId = setTimeout(() => { timeoutId = null; }, delay); } }; } ``` 在这个实现中，我们维护了一个`timeoutId`变量来记录定时器ID。当函数被调用时，我们检查`timeoutId`是否为空。如果为空，表示没有正在进行的定时器，那么就执行函数并设置定时器。定时器完成后，会清空`timeoutId`，为下一次调用做准备。 ### 二、依赖事件间时间间隔节流 ```javascript function debounce(fn, delay) { let lastExecuteTime = 0; return function() { const context = this; const args = arguments; const now = Date.now(); if (now - lastExecuteTime >= delay) { fn.apply(context, args); lastExecuteTime = now; } }; } ``` 在这个版本的节流函数中，我们使用`lastExecuteTime`记录上一次函数执行的时间。每次函数被调用时，我们都会比较当前时间与上一次执行的时间差。如果时间差大于等于设定的延迟，就执行函数，并更新`lastExecuteTime`为当前时间。 ### 应用场景 1. **页面滚动优化**：当用户滚动页面时，可以使用节流来限制处理函数（如计算滚动位置或加载更多内容）的执行频率，提高性能。 2. **窗口大小改变**：在窗口resize事件中，使用节流可以避免因频繁触发而导致的性能问题。 3. **搜索输入框**：在用户连续输入时，可以限制搜索请求的发送频率，减少服务器负担。 ### 注意事项 - 节流函数通常会影响到事件处理的实时性，因为它会延迟函数的执行。因此，在某些情况下（如需要立即响应的交互），可能需要结合防抖(debounce)函数一起使用。 - 需要根据实际应用场景选择合适的节流策略，固定时间间隔节流适合处理连续且均匀分布的事件，而依赖事件间时间间隔节流更适合不均匀的事件流。 以上就是JavaScript手写节流函数的基本知识，理解其工作原理并灵活运用，可以帮助我们在开发过程中提升应用的性能和用户体验。