How to make timer not to restart after page refresh?

✔ Recommended Answer

The reason the timer is restarting after page refresh is that the countdown time is not being saved anywhere. Each time the page is refreshed, the script starts the countdown from the beginning again.

So if you want your data to remain the same after the refresh, it should be stored in the localStorage or sessionStorage of the browser

        var spdVal = 1;        var cntDown = localStorage.getItem("countdownTime") || 5 * 60 * spdVal + 7;        setInterval(function () {            var mn, sc, ms;            cntDown--;            if (cntDown < 0) { return false; }            mn = Math.floor((cntDown / spdVal) / 60);            mn = (mn < 10 ? '0' + mn : mn);            sc = Math.floor((cntDown / spdVal) % 60);            sc = (sc < 10 ? '0' + sc : sc);            ms = Math.floor(cntDown % spdVal);            ms = (ms < 10 ? '0' + ms : ms);            var result = mn + ':' + sc;            document.getElementById('stopwatch').innerHTML = result;            localStorage.setItem("countdownTime", cntDown.toString());        }, spd);

This is how your js should look like,
See line 2 where we are looking in local store if there is any existing value that we can use or default value.See line 15 where are setting the time on each update on screen.

Source: stackoverflow.com

Answered By: Preetham Reddy

 To prevent a timer from restarting after a page refresh in JavaScript, you can use the Web Storage API to store the start time of the timer in the browser's local storage or session storage. Here's an example of how to implement this: 
javascript
// Get the current time
var startTime = new Date().getTime();

// Store the start time in local storage or session storage
localStorage.setItem('timerStartTime', startTime);
  1. When the timer starts, store the start time in local storage or session storage:
  1. When the page loads, check if there is a start time stored in local storage or session storage. If there is, use that as the start time for the timer. Otherwise, start the timer as usual:
javascript
// Get the stored start time from local storage or session storage
var storedStartTime = localStorage.getItem('timerStartTime');

// If there is a stored start time, use that as the start time for the timer
if (storedStartTime) {
  var startTime = parseInt(storedStartTime);
} else {
  var startTime = new Date().getTime();
}

// Calculate the elapsed time since the start time
var elapsedTime = new Date().getTime() - startTime;

// Start the timer with the elapsed time
startTimer(elapsedTime);
Note that local storage is persistent across browser sessions, while session storage is only available for the current session. Choose the appropriate one based on your requirements.

Comments

Post a Comment

Most Popular

Remove Unicode Zero Width Space PHP

✔ Recommended Answer This: $newBody = str_replace("&#8203;", "", $newBody); presumes the text is HTML entity encoded. This: $newBody = str_replace("\xE2\x80\x8C", "", $newBody); should work if the offending characters are not encoded, but matches the wrong character (0xe2808c). To match the same character as #8203; you need 0xe2808b: $newBody = str_replace("\xE2\x80\x8B", "", $newBody); Source: stackoverflow.com Answered By: Jef Method #2 To remove Unicode zero width space (ZWSP) from a string in PHP, you can use the str_replace() function to replace the ZWSP character with an empty string. Here's an example: php $str = "Hello&ZeroWidthSpace; World" ; // Contains ZWSP after "Hello" // Replace ZWSP with an empty string $str = str_replace ( "\u{200B}" , "" , $str ); echo $str ; // Outputs "Hello World" without ZWSP In this example, the str_replace() functi
Read more

PhpStorm, return value is expected to be 'A', 'object' returned

Image
✔ Recommended Answer Has to be because object can be ANY class instance, even B etc. You can annotate the create() method with generics PHPDoc to tell that the return type will be the same as the input parameter class string. It gives more context info to the IDE. /** * @template T * * @param string $class * @return T */ private function create(string $class) : object { return new $class(); } P.S. Instead of create('B'); better use create(B::class) . This way the IDE can track the usages of that class for refactoring/search purposes etc. Source: stackoverflow.com Answered By: LazyOne Method #2 This error message suggests that your code is expecting a value of type 'A' to be returned, but instead, the code is returning an object. This error can occur in PhpStorm, or any other PHP development environment. To resolve this error, you should check the function or method that is returning the object and ensure that it is returning
Read more

Laravel file upload returns forbidden 403, file permission is 700 not 755

✔ Recommended Answer The issue you are facing could be due to incorrect file permissions for the storage folder. Here are some steps to fix the problem: SSH into your cPanel server. Change the permission of the storage folder to 755: chmod -R 755 storage/ This command will change the permission of the storage folder and all its contents to 755, which should give the web server permission to read and write to the folder. Check the ownership of the storage folder. Ensure that the owner of the folder is the same as the user running the web server (typically www-data on Apache): ls -l This command will list the files and folders in the current directory along with their ownership and permission details. Make sure that the owner of the storage folder is the same as the user running the web server. If the ownership is incorrect, you can change it using the following command: chown -R www-data:www-data storage/ This command will change the ownership of the storage folder and all its conten
Read more