倒数计时器在 setTimeout(function() { ... } 内不起作用

Question

函数 totsessie2stopt();在这里可以正常运行：https://jsfiddle.net/szua2fed/

    // 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);
    }

    document.addEventListener('DOMContentLoaded', tick);
  })();
}
totsessie2stopt();
// End countdown

这只是一个倒计时。

问题是当我把这个函数放在 setTimeout(function() { ... } 这里时，它不会运行：https://jsfiddle.net/cx59L387/ 这个函数应该在第 2 行的给定时间运行。

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);
    }

    document.addEventListener('DOMContentLoaded', tick);
  })();
}
totsessie2stopt();
// End countdown

}, totsessie1);

在 setTimeout(function() { ... } 内部，其他函数工作正常。我已经苦苦挣扎了几天，想知道如何在其中运行倒数计时器。有人可以帮忙吗？

非常感谢！

网格

Answer 1

除了totsessie1 变量的值非常高的问题之外，您的超时函数不能在另一个超时函数中运行的另一个原因是这部分代码：

document.addEventListener('DOMContentLoaded', tick);

您在加载 DOM 时调用 tick 函数，但您忘记了由于它在超时函数内，当您附加 EventListener 时 DOM 已经加载，因此永远不会调用该函数。相反，只需正常调用该函数：

tick();

Answer 2

这里有很多复杂性，可能来自改编代码。看起来您只想在给定时间后开始倒计时，在下面的示例中，它将在 3000 毫秒后执行此操作，您可以更改它。

例如，我已经删除了加载的内容，正如我在超时运行时所猜测的那样，这不会是一个问题，setTimeout 延迟已被移动到调用 totsessie2stopt() 的更整洁的函数中，并且关闭被移除为没有必填。

// Begin countdown
function totsessie2stopt() {
 
    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);
    }

    tick();

}

// call totsession2stopt after 3000 ms
setTimeout(function() {
  document.getElementById("test1").innerHTML = "This message will display at a given time on line 2!";
  totsessie2stopt();
}, 3000);