在第一次方法调用时执行所有 if-bodies 的正确方法

Question

我使用 JavaScript 在网站上显示二进制时钟。首次加载站点时，需要将时钟设置为正确的时间，然后再更新。

获得这种行为的正确方法是什么？现在我有一个在每次更新时都会检查的 var，并在第一个运行.

之后设置为 false

复制函数，删除条件并让它调用另一个函数会更好吗？

这是函数：

time.firstRun = true;

function updateBinaryClock() {
var now = moment().toObject();

var bin;
if (time.showClockWithSeconds) {
    bin = toSixBit(now.seconds.toString(2));
    setColor(".binSec", bin);
}
if (now.seconds == 0 || time.firstRun) {
    bin = toSixBit(now.minutes.toString(2));
    setColor(".binMin", bin);
}
if (now.minutes == 0 || time.firstRun) {
    bin = toSixBit(now.hours.toString(2));
    setColor(".binHour", bin);
}
if (time.firstRun) {
    time.firstRun = false;
}

setTimeout(updateBinaryClock, 0.1 * 1000);
}

Answer 1

我要做的是将它分成 2 个函数。

function initBinaryClock() {

}
function updateBinaryClock() {

  requestAnimationFrame(updateBinaryClock);
}

window.addEventListener("load", function loader(){
  window.removeEventListener("load", loader, false);
  initBinaryClock();
  updateBinaryClock();
}, false);

Answer 2

您的函数很快就会使内存饱和，因为您忘记在每次函数执行时清除超时。您可以使用 setInterval 而不是 setTimeout:

function updateBinaryClock() {
    aux_updateBinaryClock(true);
    setInterval(aux_updateBinaryClock, 100); // 0.1*1000
}

function aux_updateBinaryClock(isFirstRun) {
  var now = moment().toObject(),
      bin;

  if (time.showClockWithSeconds) {
      bin = toSixBit(now.seconds.toString(2));
      setColor(".binSec", bin);
  }
  if (now.seconds === 0 || isFirstRun) {
      bin = toSixBit(now.minutes.toString(2));
      setColor(".binMin", bin);
  }
  if (now.minutes === 0 || isFirstRun) {
      bin = toSixBit(now.hours.toString(2));
      setColor(".binHour", bin);
  }

}

updateBinaryClock();

还要注意 setInterval and setTimeout are inaccurate, there are many more accurate implementations of setInterval and setTimeout (es. this or )

在第一次方法调用时执行所有 if-bodies 的正确方法

Right way to execute all if-bodies on the first method call

javascript

binary

clock