totsessie2stopt倒计时计时器放在setTimeout内部无法运行如何解决？

问题根因 #

倒计时失效的核心原因是 DOMContentLoaded 事件仅在页面初始DOM解析完成时触发一次。当你通过setTimeout延迟执行totsessie2stopt函数时，该事件已经触发完毕，此时再为它绑定tick监听函数，该函数永远不会被执行，倒计时自然不会启动。

解决方案 #

删除事件绑定代码，直接手动调用tick函数即可。因为setTimeout回调能正常执行修改test1内容的逻辑，说明此时DOM已经完全加载，不需要再等待DOMContentLoaded事件。

修正后的代码 #

setTimeout(function() {
  document.getElementById("test1").innerHTML = "This message will display at a given time on line 2!";

  // Begin countdown
  function totsessie2stopt() {
    (function() {
      var start = new Date;
      start.setHours(23, 30, 0); // 11pm

      function pad(num) {
        return ("0" + parseInt(num)).substr(-2);
      }

      function tick() {
        var now = new Date;
        if (now > start) { // too late, go to tomorrow
          start.setDate(start.getDate() + 1);
        }
        var remain = ((start - now) / 1000);
        var hh = pad((remain / 60 / 60) % 60);
        var mm = pad((remain / 60) % 60);
        var ss = pad(remain % 60);
        document.getElementById('time').innerHTML = " Still " + hh + " hours and " + mm + " minutes and " + ss + " seconds to go!";
        setTimeout(tick, 1000);
      }

      // 移除原有的DOMContentLoaded事件监听，直接调用tick
      tick();
    })();
  }
  totsessie2stopt();
  // End countdown
}, totsessie1);

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