Count up in Javascript starting from the page load and reset using ajax calls

Question

Count up in Javascript starting from the page load and reset using ajax calls

Having some difficulty with resetting a counter in Javascript that I found on Stack Overflow. Here is the code for the counter:

var pageVisited = new Date(); // consider storing this data in a database, session, or at least a cookie

setInterval(function() {
    var timeOnSite = new Date() - pageVisited;

    var secondsTotal = timeOnSite / 1000;

    var seconds = Math.floor(secondsTotal);

    document.getElementById('time').innerHTML = seconds;
}, 1000);

I have tried the following based on suggestions from other posts:

function stopTime(){
  clearInterval(timeOnSite);
}

Unfortunately, this method restarts the counter but causes two counters to run simultaneously.

My goal is simply to reset the counter back to 0 and start again when the user clicks 'Update' (data update functionality is already working).

Any help or recommended resources would be greatly appreciated.

Thank you

javascript ajax

Answer 1

Answer №1

In order to properly clear the interval, you must first assign it to a variable.

function myFunction() {
    var timeElapsed = new Date() - pageOpened;
    var secondsTotal = timeElapsed / 1000;
    var seconds = Math.floor(secondsTotal);

    document.getElementById('time').innerHTML = seconds;
}

var timerInterval = setInterval(myFunction, 4000);

To reset the interval, simply clear it using the assigned variable as shown below:

clearInterval(timerInterval);
timerInterval = setInterval(myFunction, 4000);

Answer 2

In order to properly clear the interval, you must first assign it to a variable.

function myFunction() {
    var timeElapsed = new Date() - pageOpened;
    var secondsTotal = timeElapsed / 1000;
    var seconds = Math.floor(secondsTotal);

    document.getElementById('time').innerHTML = seconds;
}

var timerInterval = setInterval(myFunction, 4000);

To reset the interval, simply clear it using the assigned variable as shown below:

clearInterval(timerInterval);
timerInterval = setInterval(myFunction, 4000);

Count up in Javascript starting from the page load and reset using ajax calls

Answer №1

Similar questions

How many parameters are typically transmitted through URLs in a nodeJS environment?

Did you stumble upon an unexpected JavaScript redirection?

Having trouble loading AngularJS 2 router

What are the steps to make standard calls from the main controller?

What is the best way to handle multiple promises when loading a state in Angular?

Determine the size of a JSON array in AngularJS

How to efficiently use lunr in typescript?

Steps for setting up node-openalpr on a Windows 10 system

Is it possible to use AJAX to submit a form and then redirect to a different webpage?

I encountered an issue when trying to import a React.js component in TypeScript. The .d.ts file was created by myself, but I received the error message "Module not found: Can't resolve 'xxx' in 'xxx'"

Screen the embedded array depending on the criteria

In search of an improved scoring system for matching text with JavaScript

Modify iframe form action URL dynamically upon user visiting the URL with a specified parameter

What is the purpose of using the grouping operator in this particular line of code?

Automated pagination integrated with automatic refreshing of div every few seconds

Access and retrieve dynamically generated table row values with the use of AngularJS

Is it possible to update the useContext value within a child component so that all other child components can access the updated value?

Invoke callback function to manage modal visibility

React context fails to refresh

Storing various duplicates of items in local storage