最初のメソッド呼び出しですべてのif-bodyを実行する正しい方法

Question

JavaScriptを使用してウェブサイトにバイナリクロックを表示します。サイトが最初にロードされるとき、時計は適切な時刻に設定され、更新される必要があります。

この現象を起こす正しい方法は何ですか？今私はすべての更新時にチェックされ、最初の実行後にfalseに設定されているvarを持っています。

この関数をコピーして条件を削除して他の関数を呼び出す方が良いでしょうか？

これは、関数である：

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

あなたの関数は、すぐにあなたのラムを飽和させます。あなたは代わりのsetTimeoutののsetIntervalを使用することができ ：

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

私はどうなるのか2つの機能に分離されます。あなたはすべての関数の実行にタイムアウトをクリアするのを忘れたので

function initBinaryClock() { 

} 
function updateBinaryClock() { 

    requestAnimationFrame(updateBinaryClock); 
} 

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