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

Question

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

我的代码运行良好，但我对实验时得到的意外结果感到困惑。我创建了一个类，对其进行了实例化，然后尝试打印我的 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。我觉得这个例子中有一个我没有掌握的概念，我无法弄清楚它是什么。

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

非常感谢！

标签： javascriptclassclock

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>

演示解决问题的示例

在此示例中，我所做的只是display()在您的函数中立即调用该函数run，然后设置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>