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

你的功能很快会使你的ram饱和，因为你忘了清除每个函数执行的超时。您可以使用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，有更多准确的setInterval和setTimeout实现（es。this或this）

Answer 2

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

function initBinaryClock() {

}
function updateBinaryClock() {

  requestAnimationFrame(updateBinaryClock);
}

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

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

2 个答案: