Calc 2つの関数呼び出しの間の経過時間を計算します。

Question

2つの関数呼び出しの間の経過時間を計算しようとしています。など

00:00:00,000 --> 00:00:05,212 
00:00:05,212 --> 00:00:08,450 
00:00:08,450 --> 00:00:12,999 

私はこの

var timeElapsed = Date.now(), 
    div = document.getElementById("hour"); 

//routine 
setInterval(function(){ 
    setTimeout(fn1, 1000); 
    setTimeout(fn2, 1000); 
},2000) 

function formatHour(date){ 
    var hours = ('0' + date.getHours()).slice(-2), 
     minutes = ('0' + date.getMinutes()).slice(-2), 
     seconds = ('0' + date.getSeconds()).slice(-2), 
     millis = ('00' + date.getMilliseconds()).slice(-3); 

    return ([hours,minutes,seconds].join(':')) + ',' + millis; 
} 

function fn1(){ 
    timeElapsed = Date.now() - timeElapsed; 
    div.innerHTML += formatHour(new Date(timeElapsed)) + ' --> ' 
} 
function fn2(){ 
    timeElapsed = Date.now() - timeElapsed; 
    div.innerHTML += formatHour(new Date(timeElapsed)) + '</br>'; 
} 

私の出力のようなサンプルコードを書いたことは

22:00:03,001 --> 13:52:42,115 
22:00:05,000 --> 13:52:42,115 
22:00:07,000 --> 13:52:42,115 
22:00:10,980 --> 13:52:42,115 
22:00:12,981 --> 13:52:42,115 

をだと、私の期待される出力には、（この例では、任意の時間で）このようなものです... 。

私は間違っていますか？

コード例：http://codepen.io/gpincheiraa/pen/oLPOVY

Answer 1

問題は、あなたの変数timeElapsed現在時刻と関数呼び出しの間の時間の両方を表すために使用されていることです。私は2つの変数に分割することをお勧めします：

var startTime = Date.now(), 
    div = document.getElementById("hour"); 

//routine 
setInterval(function(){ 
    setTimeout(fn1, 1000); 
    setTimeout(fn2, 1000); 
},2000) 

function formatHour(date){ 
    var hours = ('0' + date.getHours()).slice(-2), 
     minutes = ('0' + date.getMinutes()).slice(-2), 
     seconds = ('0' + date.getSeconds()).slice(-2), 
     millis = ('00' + date.getMilliseconds()).slice(-3); 

    return ([hours,minutes,seconds].join(':')) + ',' + millis; 
} 

function fn1(){ 
    var timeElapsed = Date.now() - startTime; 
    div.innerHTML += formatHour(new Date(timeElapsed)) + ' --> ' 
} 
function fn2(){ 
    var timeElapsed = Date.now() - startTime; 
    div.innerHTML += formatHour(new Date(timeElapsed)) + '</br>'; 
}