記錄在頁面上顯示某些元素需要多少時間

Question

因此，假設我們有4個Div（隱藏3個，1個可見），用戶可以通過javascript/jQuery在它們之間切換。

我想計算每個Div花費的時間，並將包含該時間的xhr發送到服務器以將其存儲在數據庫中。這個xhr會在用戶切換div視圖時發送。

我該怎麼做？任何提示將不勝感激。

感謝，

Answer 1

在任何時候，你可以記錄AA開始/單圈時間在一個變量：

var start = new Date(); 

當你要計算消耗的時間，簡單地從減去存儲的日期新的日期實例：

var elapsed = new Date() - start; 

這會給你經過的時間，以毫秒爲單位。做額外的數學（師）來計算秒，分鐘等

Answer 2

在這裏你去：

HTML：

<div id="divs"> 
    <div>First</div> 
    <div class="selected">Second</div> 
    <div>Third</div> 
    <div>Fourth</div> 
</div> 

<p id="output"></p> 

的JavaScript：

var divs = $('#divs > div'), 
    output = $('#output'), 
    tarr = [0, 0, 0, 0], 
    delay = 100; 

divs.click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
}); 

setInterval(function() { 
    var idx = divs.filter('.selected').index(); 
    tarr[idx] = tarr[idx] + delay; 
    output.text('Times (in ms): ' + tarr); 
}, delay); 

現場演示：http://jsfiddle.net/7svZr/2/

我保持時間es以毫秒爲單位，因爲整數更清潔和更安全（0.1 + 0.2 != 0.3）。請注意，您可以通過設置delay變量來調整「精度」（間隔函數的延遲）。

Answer 3

我用一個非常簡單的功能，能夠爲這種格式的經過時間：HH/MM/SS

的onclick /聚焦狀態/等

var start_time = new Date(); 

在離開：

var end_time = new Date(); 

var elapsed_ms = end_time - start_time; 
var seconds = Math.round(elapsed_ms/1000); 
var minutes = Math.round(seconds/60); 
var hours = Math.round(minutes/60); 

var sec = TrimSecondsMinutes(seconds); 
var min = TrimSecondsMinutes(minutes); 

function TrimSecondsMinutes(elapsed) { 
    if (elapsed >= 60) 
     return TrimSecondsMinutes(elapsed - 60); 
    return elapsed; 
} 

Answer 4

這是一個可重複使用的類，示例包含在代碼中：

/* 
    Help track time lapse - tells you the time difference between each "check()" and since the "start()" 

*/ 
var TimeCapture = function() { 
    var start = new Date().getTime(); 
    var last = start; 
    var now = start; 
    this.start = function() { 
     start = new Date().getTime(); 
    }; 
    this.check = function (message) { 
     now = (new Date().getTime()); 
     console.log(message, 'START:', now - start, 'LAST:', now - last); 
     last = now; 
    }; 
}; 

//Example: 
var time = new TimeCapture(); 
//begin tracking time 
time.start(); 
//...do stuff 
time.check('say something here')//look at your console for output 
//..do more stuff 
time.check('say something else')//look at your console for output 
//..do more stuff 
time.check('say something else one more time')//look at your console for output