如何每次点击对应链接时重新执行函数，让计数器从0开始计数到指定值

我看了你的问题，核心是计数器只能第一次点击生效，后续点击没反应对吧？这大概率是因为计数器的状态没重置，还有可能残留了之前的定时器导致冲突。我给你整理了几个关键修改点，保证每次点击都能从0重新开始计数：

1. 重置计数器状态并清除残留定时器 #

原来的代码里可能把计数器变量（比如count）和定时器存在全局作用域，第一次运行后变量已经到了目标值，定时器也没清理，后续调用就直接跳过了。我们可以把这些状态放到函数内部，每次调用都重新初始化：

function countTo(targetNum, element) {
  // 先清除当前元素可能残留的定时器，避免多动画叠加
  if (element.timerId) {
    clearInterval(element.timerId);
  }
  let count = 0;
  // 先把显示元素重置为0
  element.textContent = count;
  // 启动新的定时器
  element.timerId = setInterval(() => {
    count++;
    element.textContent = count;
    if (count === targetNum) {
      clearInterval(element.timerId);
      delete element.timerId; // 清理定时器引用
    }
  }, 50);
}

2. 优化链接点击的逻辑，放弃字符串匹配函数名 #

原来通过data属性存函数名再匹配的方式容易出错，不如直接把目标数值和对应显示元素的选择器存在data属性里，点击时直接调用通用计数函数：

修改后的HTML #

<a href="#" class="count-trigger" data-target="100" data-counter="#counter1">计数到100</a>
<a href="#" class="count-trigger" data-target="200" data-counter="#counter2">计数到200</a>

<div id="counter1">0</div>
<div id="counter2">0</div>

对应的JS事件绑定 #

document.querySelectorAll('.count-trigger').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    // 从data属性获取目标数值和对应元素
    const targetNum = parseInt(this.dataset.target);
    const counterElement = document.querySelector(this.dataset.counter);
    // 调用计数函数
    countTo(targetNum, counterElement);
  });
});

3. 完整可运行示例 #

把上面的代码整合起来，完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>可重复触发的计数器</title>
</head>
<body>
  <a href="#" class="count-trigger" data-target="100" data-counter="#counter1">点击计数到100</a>
  <br>
  <a href="#" class="count-trigger" data-target="200" data-counter="#counter2">点击计数到200</a>
  
  <div style="margin-top: 20px;" id="counter1">0</div>
  <div style="margin-top: 10px;" id="counter2">0</div>

  <script>
    function countTo(targetNum, element) {
      if (element.timerId) {
        clearInterval(element.timerId);
      }
      let count = 0;
      element.textContent = count;
      element.timerId = setInterval(() => {
        count++;
        element.textContent = count;
        if (count === targetNum) {
          clearInterval(element.timerId);
          delete element.timerId;
        }
      }, 50);
    }

    document.querySelectorAll('.count-trigger').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetNum = parseInt(this.dataset.target);
        const counterElement = document.querySelector(this.dataset.counter);
        countTo(targetNum, counterElement);
      });
    });
  </script>
</body>
</html>

这样修改后，不管你点击多少次链接，对应的计数器都会从0开始重新计数到目标值，不会再出现第一次点击后失效的问题。

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