CODEWITHSUNDEEP
javascriptjqueryhtmltimer
wael34218
wael34218

Reputation: 4930

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 containing that time to server to store it in the database. This xhr will be sent when the user toggle the div view.

How can I do that? Any hints will be greatly appreciated.

Thanks,

Upvotes: 21

Views: 30926

Answers (6)

jrswgtr
jrswgtr

Reputation: 2379

I created an ES6 class based on @Shawn Dotey's answer.

The check() method does not log a message, but returns the elapsed time.

The method start() is not needed in his example (the constructor already "starts" it). So I replaced it by reset() which makes more sense.

export default class TimeCapture
{
    constructor()
    {
        this.reset();
    }

    reset()
    {
        this.startTime = new Date().getTime();
        this.lastTime = this.startTime;
        this.nowTime = this.startTime;
    }

    check()
    {
        this.nowTime = new Date().getTime();
        const elapsed = this.nowTime - this.lastTime;
        this.lastTime = this.nowTime;

        return elapsed;
    }
}

Use it in your project like this:

import TimeCapture from './time-capture';

const timeCapture = new TimeCapture();

setTimeout(function() {
    console.log( timeCapture.check() + " ms have elapsed" ); //~100 ms have elapsed
    timeCapture.reset();
    setTimeout(function() {
        console.log( timeCapture.check() + " ms have elapsed" ); //~200 ms have elapsed
    }, 200);
}, 100);

Upvotes: 0

Naga Srinu Kapusetti
Naga Srinu Kapusetti

Reputation: 1611

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

Upvotes: 2

Shawn Dotey
Shawn Dotey

Reputation: 616

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

Upvotes: 5

Simone
Simone

Reputation: 342

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

onclick/onfocus/etc..

var start_time = new Date();

on leaving:

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

Upvotes: 2

Šime Vidas
Šime Vidas

Reputation: 185933

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.

Upvotes: 8

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140050

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.

Upvotes: 35

Related Questions