javascript - Keep track of how much time is spent showing certain elements on the page

Question

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,

Answer 1

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.