无法控制台记录我的方法插入 DOM 的 HTML

Question

我正在制作一个简单的时钟应用程序，它显示当前时间，作为结合 HTML 和 CSS 练习我的 JS 的一种方式（我对编码很陌生）。

我的代码运行良好，但我对实验时得到的意外结果感到困惑。 我创建了一个 class，对其进行实例化，然后尝试打印我的 display() 方法插入到预先存在的 div (id="time") 中的内部 HTML。

见下文：

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML);

 <div id="time"></div>

给出空字符串？ 为什么它不记录我在 display() 方法中插入的 HTML？

如上所述，我不明白为什么当我 console.log 时无法识别作为 display() 方法的一部分插入到我的“时间”div 中的 HTML。 我觉得这个例子中有一个我没有掌握的概念，我无法弄清楚它是什么。

有人可以帮忙解释一下吗？

非常感谢！

Answer 1

setInterval不会立即触发，它只会在第一个延迟（1 秒）后开始触发。

因此，此时您的console.log在时间 div 内没有任何内容之前触发。

解决此问题的一种方法是调用this.display然后设置setInterval 。

演示当前问题的示例

在此示例中，我在时间 div 中添加了一些文本，当您运行示例时，您会看到该文本显示一秒钟，并且还会记录到控制台。

然后我在 1.5 秒后记录时间 div 内容，然后显示当前时间。

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML); setTimeout(function(){ console.log(time.innerHTML); }, 1500);

 <div id="time">Not Updated Yet</div>

演示解决问题的示例

在这个例子中，我所做的只是在你的run function 中立即调用display() function 然后设置setInterval 。 这样，时间会立即设置，因此可以记录到控制台。

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { this.display(); setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML);

 <div id="time"></div>

Answer 2

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time);

 <div id="time"></div>