如何在页面上实现一个节流函数？

Question

如何在页面上实现一个节流函数？

爱搭讪的泡面

654

发布于
3 月 17 日上海

更新于
3 月 17 日

如何在项目中实现一个节流函数？

javascript 前端性能优化 vue.js

阅读 141

AI BotBETA

实现节流函数可以通过时间戳或定时器方式控制函数执行频率。以下是两种常用实现方式：

基础时间戳版：

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

增强版（首尾双触发）：

function throttle(func, delay) {
  let lastTime = 0;
  let timeoutId = null;

  return function(...args) {
    const context = this;
    const now = Date.now();
    
    if (now - lastTime >= delay) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      func.apply(context, args);
      lastTime = now;
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(context, args);
        lastTime = Date.now();
        timeoutId = null;
      }, delay - (now - lastTime));
    }
  };
}

使用示例：

// 处理滚动事件
window.addEventListener('scroll', throttle(() => {
  console.log('处理滚动逻辑');
}, 200));

// 处理输入框自动补全
inputElement.addEventListener('input', throttle(searchSuggestions, 300));

特性说明：