Keep track of how much time is spent showing certain elements on the page
Here you go:
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);
Live demo: http://jsfiddle.net/7svZr/2/
I keep the times in milliseconds because integers are cleaner and safer (0.1 + 0.2 != 0.3
). Note that you can adjust the "precision" (the delay of the interval function) by setting the delay
variable.
At any point, you can record a a start/lap time in a variable with:
var start = new Date();
When you want to calculate the elapsed time, simply subtract the stored date from a new Date instance:
var elapsed = new Date() - start;
This will give you the elapsed time in milliseconds. Do additional math (division) to calculate seconds, minutes, etc.
Here is a reusable class, example is included in code:
/*
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