js代码-节流 防抖

在JavaScript编程中，"节流"（Throttling）和"防抖"（Debouncing）是两种优化性能的重要技术，特别是在处理用户交互事件、滚动事件或者窗口resize事件时，可以显著提高应用的响应速度和流畅性。这两种技术都是为了减少函数的执行频率，但它们的实现方式和应用场景有所不同。 **节流（Throttling）** 节流技术的主要目的是限制函数在一定时间内的执行次数，确保其不会过于频繁地触发。比如，在页面滚动事件中，我们可能只需要在滚动停止后的一段时间内更新布局，而不是每次滚动都进行计算。节流通常有两种实现方式：固定时间间隔和基于事件的间隔。 1. 固定时间间隔：设定一个时间间隔，例如300毫秒，无论多少次事件触发，函数只在该间隔的末尾执行一次。这通常使用`setTimeout`来实现。 2. 基于事件的间隔：在事件首次触发时启动定时器，然后在接下来的事件触发中取消并重新设置定时器，只有在一段时间没有事件触发时，定时器结束，函数才会执行。这种方式可以使用`clearTimeout`和`setTimeout`配合使用。 **防抖（Debouncing）** 防抖技术则是在一系列连续的事件触发中，只在事件触发的最后一定时间内执行一次函数，如果在这段时间内又发生了新的事件，那么会重新计时。防抖常用于输入验证、搜索查询等场景，可以防止因用户快速输入而产生的大量无用计算。 防抖的基本实现思路是使用`setTimeout`，当事件触发时，清除已存在的定时器，并重新设置定时器。如果在设定的时间内没有新的事件触发，定时器执行函数；否则，定时器会被新的事件再次清除。 现在让我们看看`main.js`文件中可能的实现： ```javascript function throttle(func, delay) { let timeoutId; return function() { const context = this; const args = arguments; if (!timeoutId) { timeoutId = setTimeout(() => { func.apply(context, args); timeoutId = null; }, delay); } }; } function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = arguments; clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(context, args); }, delay); }; } ``` 以上代码分别实现了节流和防抖函数。`throttle`函数接受一个函数`func`和延迟时间`delay`作为参数，返回一个新的函数。新函数在第一次调用时启动定时器，后续调用会在定时器时间内清除并重新设置。`debounce`函数类似，但每次调用都会清除并重新设置定时器。 在实际应用中，我们可以将这两个函数应用到各种事件处理器中，例如： ```javascript window.addEventListener('resize', throttle(resizeHandler, 300)); inputElement.addEventListener('input', debounce(searchHandler, 300)); ``` 通过这种方式，resizeHandler只在用户停止调整窗口大小后执行，searchHandler则在用户停止输入300毫秒后执行一次搜索。 总结来说，节流和防抖是JavaScript性能优化中的重要技巧，它们通过控制函数执行的频率来提升用户体验和应用性能。正确理解和运用这两种技术，能够帮助开发者编写出更高效、更流畅的代码。