如何为集合中所有HTML元素分配独立的setInterval函数？

嘿，我看你现在的代码有几个关键问题需要调整，才能让每个.counter拥有独立的递增定时器，还能正确利用你设置的data-number目标值。咱们一步步来修正：

原代码的核心问题 #

• 你把setInterval返回的定时器ID当成事件处理函数绑定到元素上了，这是完全错误的用法——setInterval返回的是数字ID，不是可执行的回调函数，而且DOMContentLoaded是document级别的事件，元素本身不会触发这个事件。
• 定时器回调里的this指向不对，默认会指向全局对象（浏览器里是window），根本取不到当前计数器元素的内容。
• 没有考虑停止条件，计数器会一直无限递增下去，没用到你设置的data-number目标值。

修正后的完整代码 #

document.addEventListener("DOMContentLoaded", function() { 
  // 获取所有带.counter类的元素
  const counters = document.querySelectorAll('.counter'); 

  // 遍历每个计数器，为其创建独立的定时器
  counters.forEach(counter => {
    // 从data-number属性获取目标数值
    const targetNumber = parseInt(counter.dataset.number, 10);
    // 初始化当前显示的数值
    let currentNumber = parseInt(counter.innerText, 10);

    // 为当前计数器创建专属定时器
    const intervalId = setInterval(() => {
      // 还没到目标值就递增
      if (currentNumber < targetNumber) {
        currentNumber++;
        counter.innerText = currentNumber;
      } else {
        // 达到目标后清除定时器，避免浪费性能
        clearInterval(intervalId);
      }
    }, 1000);

    // 可选：把定时器ID存在元素属性上，方便后续手动停止（比如需要重置时）
    counter.counterInterval = intervalId;
  });
});

关键细节说明 #

• 独立定时器：通过forEach遍历每个元素，每次迭代都会创建一个全新的定时器，每个计数器的定时器完全独立，互不干扰。
• 正确的元素指向：用箭头函数() => {}代替普通函数，这样可以保留外部作用域的counter变量，不用纠结this的指向问题，直接操作当前计数器元素。
• 目标值控制：读取每个元素的data-number属性作为停止条件，到点就清除定时器，避免无效的后台操作。
• 变量作用域：使用const和let声明变量，确保每个迭代里的变量都是独立的，不会出现循环闭包导致的变量共享问题（如果用var的传统for循环容易踩这个坑）。

额外小提示 #

如果之后需要手动停止某个计数器的递增，可以直接调用clearInterval(counterElement.counterInterval)，比如给某个计数器加个停止按钮的时候就能用到。

内容的提问来源于stack exchange，提问作者Piotr