同一页面多倒计时定时器问题：jQuery仅作用于单个实例

我看到你遇到的问题了——你的代码里所有倒计时最后都只更新最后一个.cd元素，这是因为**$id是全局变量**，在each循环的每次迭代中都会被覆盖。当setInterval的回调函数执行时，它引用的$id已经是最后一个元素的ID了，所以所有定时器都在更新同一个元素。

修复方案：使用局部变量或直接操作当前元素 #

我们可以把元素引用保存在each回调的局部作用域里，让每个定时器对应自己的目标元素，避免变量覆盖的问题。下面是修正后的完整代码：

JavaScript 代码

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    // 将目标日期和当前元素都绑定在当前迭代的作用域内
    var countDownDate = new Date($(this).attr('value'));
    var $targetElement = $(obj);

    // 每秒更新一次倒计时
    var timer = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

      // 计算天、时、分、秒
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // 直接更新当前元素的内容
      $targetElement.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

      // 倒计时结束时的处理
      if (distance < 0) {
        clearInterval(timer);
        $targetElement.html("EXPIRED");
      }
    }, 1000);
  });
});

HTML 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

关键改进说明 #

• 把$targetElement保存在each回调的局部作用域中，每个定时器的回调都会引用自己对应的元素，不会互相干扰。
• 使用jQuery的.html()方法代替原生的innerHTML，代码更简洁，也符合jQuery的使用习惯。
• 避免了全局变量带来的作用域污染问题，每个倒计时逻辑都是独立运行的。

这样修改后，所有带有class="cd"的元素都会正确显示自己的倒计时了！

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