如何在jQuery倒计时结束后无刷新重载div并重启倒计时？

1. 原倒计时代码仅在页面首次加载时执行一次，通过load重载#reloaddiv后，新DOM元素不会自动触发倒计时初始化。
2. 倒计时结束时未彻底清理旧定时器，可能引发逻辑冲突或内存泄漏。
3. 原逻辑中倒计时结束后清空了localStorage，但重载div后未重新生成新的倒计时结束时间。

把倒计时逻辑封装为可复用函数，在div重载完成后重新初始化倒计时，同时确保清理旧定时器。

修改后的代码 #

HTML（保持不变） #

<div id="reloaddiv">
  <h2 id="divCounter"></h2>
</div>

jQuery/JavaScript代码 #

// 封装倒计时初始化函数
function initCountdown() {
  // 清除可能存在的旧定时器
  if (window.countdownInterval) {
    clearInterval(window.countdownInterval);
  }

  var minutesleft = 0;
  var secondsleft = 30;
  var end1;

  // 重置localStorage，确保使用新的倒计时时间
  localStorage.removeItem("end1");
  localStorage.clear();

  // 生成新的倒计时结束时间
  end1 = new Date();
  end1.setMinutes(end1.getMinutes() + minutesleft);
  end1.setSeconds(end1.getSeconds() + secondsleft);

  var counter = function () {
    var now = new Date();
    var diff = end1 - now;
    diff = new Date(diff);

    var sec = parseInt((diff / 1000) % 60);
    var mins = parseInt((diff / (1000 * 60)) % 60);

    // 补零处理
    mins = mins < 10 ? "0" + mins : mins;
    sec = sec < 10 ? "0" + sec : sec;

    if (now >= end1) {
      clearInterval(window.countdownInterval);
      localStorage.removeItem("end1");
      localStorage.clear();
      // 重载div后立即重新初始化倒计时
      $("#reloaddiv").load(location.href + " #reloaddiv>*", function() {
        initCountdown();
      });
    } else {
      var value = mins + ":" + sec;
      localStorage.setItem("end1", end1);
      document.getElementById('divCounter').innerHTML = value;
    }
  };

  // 将定时器挂载到window，方便后续清除
  window.countdownInterval = setInterval(counter, 1000);
}

// 页面首次加载时初始化倒计时
$(document).ready(function() {
  initCountdown();
});

关键修改点说明 #

• 把倒计时逻辑封装成initCountdown函数，支持重复调用触发新的倒计时。
• 每次初始化前清除旧定时器，避免多个定时器同时运行导致的异常。
• 倒计时结束后，在load方法的回调函数中重新调用initCountdown，确保新DOM加载完成后立即启动新倒计时。
• 初始化时强制重置localStorage，避免复用已过期的倒计时结束时间。

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