Skip to Content (Press Enter)
2024-06-03 11-04-24
Priya Naveen
45Views
1Comments
Solved
countdown timer functionality needed?
Question
1-Click Publish

Hi, I need a countdown timer functionality (from 60 mins to 0) for my reactive web app. I've added JavaScript code on the client side, and it's running properly. However, the issue is that the timer only runs when my application's tab is active in the browser. If I switch to another tab, it stops, and when I return to it, it continues. Similarly, if my laptop screen is off, it stops, but when I turn the screen back on, it continues. Please suggest a solution." 

1
0
10 Apr 2024
Copy Link
2023-03-30 10-13-40
Miguel Antunes
Solution

Hi Priya,

You can achieve this by using the Page Visibility API to detect when the tab becomes hidden.

  • You need to keep track of the starting time when the timer initially started.
  • When the tab becomes hidden, you pause the timer by clearing the interval.
  • When the tab becomes visible again, you need to calculate the elapsed time while the tab was hidden and adjust the timer accordingly.
0
0
10 Apr 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.