正文

jquery each每隔一秒执行一次的正确写法与常见错误排查避免定时器卡顿和内存泄漏

/0 浏览量
0905

说真的，看到“jQuery each 每隔一秒执行一次”这个需求，我第一反应是：这题有点坑。因为 $.each 本身是个同步的迭代工具，它不支持延迟、不支持回调间隔，强行用它做“延时轮询”或“逐个执行”，99% 的人会写出 bug 满天飞的代码。但既然你问到了，我就把这件事掰开揉碎讲清楚，顺便带你看透那些让人头秃的陷阱。

为什么 $.each 天生不适合做“每隔一秒执行”？

先说结论：$.each 是同步的、立即完成的迭代函数，它没有内置的定时机制。

想象一下，你在用扫帚扫地面——$.each 就像你一口气把整个屋子扫完，而不是“每扫一个角落停一秒”。如果你强行在里面塞 setTimeout，很容易出现以下尴尬场景：

  • 所有定时器同时注册，结果第一秒没延迟，第二秒全部爆发执行；
  • 闭包捕获变量错误，拿到的是循环结束后的最终值，而不是当前迭代的值；
  • 内存泄漏，因为定时器引用没清理，对象无法被垃圾回收；
  • 性能卡顿，大量异步任务堆积，浏览器渲染线程被拖垮。

所以，正确思路是：放弃在 $.each 内部直接塞定时器，改用“索引 + 递归 setTimeout”或“async/await + delay”模式，实现真正的“每隔一秒执行一次”。

正确写法一：递归 setTimeout + 索引追踪（经典可靠）

这是最稳、最兼容、最容易理解的方案。核心思想是：每次执行完一个元素后，手动延迟再调用自身，直到遍历完为止。

function executeEachWithDelay($elements, callback, delay = 1000) {
  let index = 0;

  function step() {
    if (index >= $elements.length) {
      return; // 遍历结束，清理并退出
    }

    // 执行当前元素的回调
    callback.call($elements[index], index, $elements[index]);

    // 递增索引，并安排下一次执行
    index++;
    if (index < $elements.length) {
      setTimeout(step, delay);
    }
  }

  // 启动第一步
  step();
}

// 使用示例：对每个 li 每隔 1 秒执行一次
const $items = $('li.item');
executeEachWithDelay($items, function(index, element) {
  const $el = $(element);
  $el.addClass('animated').text('已处理第 ' + (index + 1) + ' 项');
  console.log('处理元素:', index, $el.text());
}, 1000);

为什么这样写安全？

  • 每次只注册一个 setTimeout，不会堆积；
  • index 在闭包中正确捕获，不会错位；
  • 遍历结束后自然退出，没有悬空定时器；
  • 不依赖 jQuery 版本，纯原生逻辑，兼容性好。

正确写法二：async/await + 延迟函数（现代优雅）

如果你能使用 ES2017+ 环境，async/await 会让代码更可读。先封装一个 delay 函数，再用 for 循环替代 $.each，逻辑更清晰。

// 延迟工具函数
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// 现代写法：async 函数 + for...of
async function processElementsWithDelay($elements, callback, delayMs = 1000) {
  const elements = $elements.toArray(); // jQuery 对象转原生数组

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    await callback(element, i);           // 执行回调，等待完成
    if (i < elements.length - 1) {        // 最后一个元素后不需要再延迟
      await delay(delayMs);
    }
  }
}

// 使用示例
const $buttons = $('button.submit');
processElementsWithDelay($buttons, async (el, index) => {
  const $btn = $(el);
  $btn.prop('disabled', true).text('处理中...');
  // 模拟异步操作，比如 AJAX
  await fetch('/api/process', { method: 'POST' });
  $btn.text('完成').removeClass('loading');
}, 1000);

优势：

  • 代码结构清晰，像读故事一样；
  • 支持真正的异步回调（比如 AJAX），不会阻塞；
  • 内存管理自然，没有闭包陷阱；
  • 易于测试和调试。

常见错误与陷阱排查

错误 1：直接在 $.each 里套 setTimeout，忘记闭包作用域

// ❌ 错误示例
$('li').each(function(i) {
  setTimeout(function() {
    console.log(i); // 永远输出数组长度，而不是 0,1,2...
  }, 1000);
});

原因： setTimeout 是异步的，当回调执行时，$.each 循环早已结束，i 的值已经是最终值（比如 5）。所有定时器输出的都是同一个错误数字。

修复： 用 IIFE 或 let 块级作用域隔离变量：

// ✅ 修复版：用 let 创建块级作用域
$('li').each(function(i) {
  setTimeout((index) => {
    console.log(index); // 正确输出 0,1,2...
  }, 1000 * (i + 1), i); // 注意：这里延迟是累积的，不是每隔1秒
});

或者更推荐用前面的递归方案，避免累积延迟。

错误 2：定时器堆积，导致性能卡顿

// ❌ 错误示例：一次性注册所有定时器
const $items = $('li');
$items.each(function(i) {
  setTimeout(function() {
    $(this).addClass('done');
  }, 1000);
});

问题： 一秒钟后，所有 li 同时执行，不是“每隔一秒”，而是“一秒后全部执行”。如果元素有 1000 个，浏览器会瞬间卡顿。

修复： 使用递推方案，每次只执行一个，再预约下一个：

// ✅ 正确：逐个执行，间隔可控
let index = 0;
const $items = $('li');
function processNext() {
  if (index >= $items.length) return;
  $items.eq(index++).addClass('done');
  setTimeout(processNext, 1000); // 只在还有元素时才预约
}
processNext();

错误 3：内存泄漏——定时器引用未清理

// ❌ 错误示例：组件销毁时定时器仍在运行
function init() {
  const $container = $('#container');
  $container.find('li').each(function(i) {
    setTimeout(function() {
      if ($container.length) { // 检查容器还在
        $(this).fadeOut();
      }
    }, 1000 * i);
  });
}

// 当 #container 被移除后，定时器仍在运行，引用无法回收

修复： 保存定时器 ID，在合适时机清除：

// ✅ 正确：管理定时器生命周期
function init() {
  const $container = $('#container');
  const timers = []; // 保存所有定时器 ID

  $container.find('li').each(function(i) {
    const timerId = setTimeout(function() {
      if ($container.length) {
        $(this).fadeOut();
      }
      // 从数组中移除，帮助 GC
      const idx = timers.indexOf(timerId);
      if (idx > -1) timers.splice(idx, 1);
    }, 1000 * i);
    timers.push(timerId);
  });

  // 提供清理方法
  return {
    destroy: function() {
      timers.forEach(clearTimeout); // 清除所有定时器
      timers.length = 0;            // 清空数组
    }
  };
}

const controller = init();
// 当需要销毁时
controller.destroy();

错误 4：用 setInterval 替代 setTimeout，导致执行间隔漂移

// ❌ 错误示例：setInterval 执行耗时操作，导致间隔越来越长
let index = 0;
const intervalId = setInterval(function() {
  $('li').eq(index++).addClass('done');
  // 如果这里还有 AJAX 或其他耗时操作，setInterval 不会等待
}, 1000);

问题： setInterval 不关心上次执行是否完成，只按固定间隔触发。如果某次执行耗时 2 秒，下一轮会在 3 秒后开始，造成“卡顿感”，甚至任务堆积。

修复： 改用 setTimeout 递归，确保每次执行完成后才预约下一次：

// ✅ 正确：setTimeout 递归，保证间隔稳定
function runWithStableInterval($elements, callback, delay) {
  let i = 0;
  function step() {
    if (i >= $elements.length) return;
    callback.call($elements[i], i, $elements[i]);
    i++;
    setTimeout(step, delay);
  }
  step();
}

性能优化建议：大列表如何处理？

当元素数量超过 50 个时，即使用正确写法，也可能造成 UI 卡顿。建议：

1. 使用 requestAnimationFrame 分片处理

function processInBatches($elements, callback, batchSize = 5, delay = 1000) {
  let i = 0;
  function processBatch() {
    const end = Math.min(i + batchSize, $elements.length);
    for (; i < end; i++) {
      callback.call($elements[i], i, $elements[i]);
    }
    if (i < $elements.length) {
      setTimeout(processBatch, delay);
    }
  }
  processBatch();
}

2. 添加防抖/节流，避免重复触发

如果用户频繁操作（比如滚动加载），确保每次只启动一个新序列：

let runningProcess = null;

function startDelayedProcess($elements, callback, delay) {
  if (runningProcess) {
    // 取消之前的序列
    // 实际项目中需要保存 timerId 才能取消
  }
  // 启动新序列...
}

3. 监控内存使用

在浏览器 DevTools 中观察：

  • Memory 面板：查看 Heap Size 是否持续增长；
  • Performance 面板：检查是否有大量定时器堆积；
  • Task Manager：确认 CPU 和内存占用正常。

总结：最佳实践清单

场景 推荐方案 关键注意点
小数量（<20） 递归 setTimeout 最简单，兼容性好
大数量或需异步 async/await + for 循环 代码清晰，支持真正的异步
需要取消能力 保存 timerId，提供 destroy 方法 防止内存泄漏
性能敏感 requestAnimationFrame 分片 避免 UI 卡顿
用户交互触发 防抖/节流包装 避免重复启动

最后记住一句话： $.each 是迭代工具，不是定时器管理器。把“延迟执行”的逻辑从 $.each 中剥离出来，用递归或 async/await 来实现，才能写出既稳定又高效的代码。

希望这篇文章能帮你彻底搞定这个常见坑。如果还有具体问题，欢迎继续交流！

-- 展开阅读全文 --