无法 console.log HTML 我的方法插入 DOM

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它。我觉得这个例子中有一个概念我没有掌握，我想不通它是什么。

有人能帮忙解释一下吗？

非常感谢！

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 函数中调用 display() 函数，然后设置 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>

无法 console.log HTML 我的方法插入 DOM

Unable to console.log HTML that my method inserts into DOM

javascript

class

clock

演示当前问题的示例

用于演示如何解决问题的示例