Keep Track Of How Much Time Is Spent Showing Certain Elements On The Page

So lets say we have 4 Divs (3 hidden, 1 visible), the user is able to toggle between them through javascript/jQuery. I want to calculate time spent on each Div, and send an xhr con

Solution 1:

At any point, you can record a a start/lap time in a variable with:

var start = newDate();

When you want to calculate the elapsed time, simply subtract the stored date from a new Date instance:

var elapsed = newDate() - start;

This will give you the elapsed time in milliseconds. Do additional math (division) to calculate seconds, minutes, etc.

Solution 2:

Here you go:

HTML:

<divid="divs"><div>First</div><divclass="selected">Second</div><div>Third</div><div>Fourth</div></div><pid="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.

Solution 3:

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()"

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

//Example:var time = newTimeCapture();
//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

Solution 4:

I use a really easy function to provide time elapsed in this format: hh/mm/ss

onclick/onfocus/etc..

var start_time = newDate();

on leaving:

var end_time = newDate();

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);

functionTrimSecondsMinutes(elapsed) {
    if (elapsed >= 60)
        returnTrimSecondsMinutes(elapsed - 60);
    return elapsed;
}

Solution 5:

Javascript console internally has a function called "console.time() and console.timeEnd() to do the same. Simple you can use them

console.time("List API");
setTimeout(()=> {
  console.timeEnd("List API");
},5000);

More details can be found here https://developer.mozilla.org/en-US/docs/Web/API/Console/time