keep track of time as user changes web pages

November 23, 2016, at 7:02 PM

I have a requirement where a user presses a start timer button and it begins keeping track of time. As the user moves through the website, I want the time to continue tracking, until they press the stop button.

Obviously, this cannot be achieved through client-side javascript alone, since for each page refresh time will be lost. One solution I thought was to use faye/websockets to just push the time to the browser, but for every second that lapses, that will push data to client - a strain on the server.

The only solution I can come up with is keep track of the time in javascript and then capture the page unload event send, ajax request to server with the amount of time, and let the server continue incrementing time until the next page is fully loaded. This means it will not be using push technology, just regular ajax. Is this the optimal option here or is there a better solution?

Answer 1

What about the case where the user kills the browser? You won't be able to capture the unload event in this case.

If you want a client side solution, try putting the start time in the localStorage where this will persist across page loads. Then when the user hits stop, you can make an ajax call to the server with the elapsed time.

Answer 2

I assume you need to display a timer to the user, which updates every second.

I have built a web application like that. It was a single-page application (AngularJS), so the user could navigate from 'page' to 'page' without a complete web page being loaded and the timer kept running. Would that be an option in your case?

Otherwise, you could put the start time in a cookie and every second display the difference between the current time and the start time.

A few other options, which are less preferred:

  1. Run the web site in an iframe and keep the timer outside the iframe.
  2. Let the timer run on the server and make a small AJAX request to the server every second (yes, I know...).
  3. Hybrid: Let the timer run on the server and on the client and synchronize the client with the server on every page load.

Options 2 and 3 require a stateful server (with all its drawbacks).

Rent Charter Buses Company
pass object type value into php page using ajax jquery

pass object type value into php page using ajax jquery

I have multiple multiple dynamic checkbox and after checked to the checkbox[nnn]it return values on object format like below. .