深入理解throttled

小蓝 • 2024-12-09 11:01 • 编程

一、作用及原理

Throttled是一种限制频率的函数，可以用来减少不必要的性能开销，保护应用程序免受过载的影响。该函数将输入动作转换为固定的时间间隔，并在此时间间隔内忽略所有附加输入。例如，如果一个用户频繁地调整窗口大小并引起了视图更新，那么throttled函数将确保每个更新周期之间有一定的时间间隔。

实现的原理是使用setTimeout来执行要调用的函数，并设置一个固定的延迟时间。当throttled函数被调用时，它会检查当前是否已经设置了一个timeout，如果有，则不执行操作。如果没有，则设置一个timeout使函数在延迟时间之后被调用，并返回函数的结果。下一次调用将检查是否有一个timeout，直到所有的调用都已经在一定的时间间隔后进行。

二、使用方法

throttled函数通常用于优化用户交互，如滚动、窗口改变大小等操作，以避免过多次触发操作产生的重复和多余的计算。

一个示例是限制用于搜索框的自动补全功能，以避免每次用户输入字符时都调用API。使用throttled函数，可以将搜索操作限制在固定的时间间隔内，并仅在此时间过去后才调用API。

function search(keyword) {
  // 调用API的操作
}

const throttledSearch = throttled(search, 1000); // 设置延迟为1秒钟

input.addEventListener('input', (e) => {
  throttledSearch(e.target.value); // 只有当用户停止输入1秒钟后才会调用
});

在上面的例子中，每当用户在搜索框中输入文字时，都会调用throttledSearch函数。该函数仅在用户停止输入1秒钟后才会实际调用search函数，以限制API的调用频率。

三、使用场景

throttled函数通常用于以下场景：

1. 监听窗口大小改变

当用户调整窗口大小时，整个页面都会被重新渲染。为了避免每次窗口大小发生变化都重新渲染页面，可以使用throttled函数来限制渲染的频率。

window.addEventListener('resize', throttled(() => {
  // 重新渲染页面
}, 500));

2. 防止重复提交表单

当用户快速提交表单时，可能会产生重复提交的问题。使用throttled函数可以避免此问题，限制表单提交的频率。

form.addEventListener('submit', throttled((e) => {
  e.preventDefault();
  // 提交表单的操作
}, 1000));

3. 滚动事件的监听

滚动事件通常会触发频繁的回调，因此使用throttled函数可以优化滚动事件的处理。

window.addEventListener('scroll', throttled(() => {
  // 处理滚动事件
}, 500));

四、总结

通过使用throttled函数，可以优化许多用户交互场景，同时减少不必要的性能开销。该函数的实现原理简单，但应该注意将延迟时间设置得合理，以便在不降低用户体验的情况下优化性能。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/219878.html