从javascript类内部更改div的内容

Question

您好，亲爱的编码伙伴，

我有问题：

我正在尝试使用我制作的类中方法的结果来更改div的内容。不知何故我一直以null结尾。我可能在概念上做错了，但由于我对javascript很陌生，所以我不知道该怎么办。

到目前为止，这是我的代码：

class Virus {
  constructor(population) {
    this.mortalityPercentage = 0.023;
    this.period = 1;
    this.infectionRate = 2;
    this.infected = 1;
    this.population = population;
  }
  calculate() {
    while (this.infected < this.population) {
      this.period += 6;
      console.log(this.period);
      this.infected *= this.infectionRate;
      console.log(this.infected);
      this.dead = this.infected * this.mortalityPercentage;
      console.log(this.dead);
    }
  }
  render() {
        document.getElementById('days').innerHTML = this.period;
        document.getElementById('infected').innerHTML = this.infected;
        document.getElementById('dead').innerHTML = this.dead;
  }
};

let virus = new Virus(7760000000);
virus.calculate();
virus.render();

How many days does it take to infect the world?
<div id="days">

</div>
Number of infected people:
<div id="infected">

</div>
I see dead people:
<div id="dead">

</div>

这是我在jsFiddle上收到的错误消息：未捕获的TypeError：无法将属性'innerHTML'设置为null在Virus.render（（索引）：55）在（索引）：63理想情况下，我想要一个使用setInterval或requestAnimationFrame的计数器，但我不知道如何使用。您能帮忙吗？

Answer 1

您的setInterval可以放在很多地方，但是将其放在函数调用周围可能是最清楚的：

setInterval( () => {
  virus.calculate();
  virus.render();
}, 250)

现在，计算和渲染方法将每250ms]执行一次>

您可以将计算中的while替换为if，因为每次调用该函数都会对其进行评估

calculate() {
  if (this.infected < this.population) {
    this.period += 6;
    this.infected *= this.infectionRate;
    this.dead = this.infected * this.mortalityPercentage;
  }
}
工作示例：https://jsfiddle.net/yodjf14v/3/

或者，您可以将setInterval放在calculate()函数中，并使其调用render()：

calculate() {
  setInterval( () => {
    if (this.infected < this.population) {
      this.period += 6;
      this.infected *= this.infectionRate;
      this.dead = this.infected * this.mortalityPercentage;
      this.render();
    }
  }, 250)
}
为了获得更多好处，请将setInterval中的250ms设为您所定义的类的属性，例如this.interval = 250;。将值放在代码中间称为magic number，通常被认为是不好的做法。 

requestAnimationFrame可能不太适合您的用例，因为您无法直接控制它的运行时间（即：每n毫秒）。当您想尽可能多地重绘时，通常将其用于动画。

您总是可以通过存储上次调用的时间并将其与当前时间进行比较来限制函数调用，但是在这种情况下，它只是setInterval，需要更多步骤