How to build a countdown timer for 60 seconds

Need help
1

I have built a countdown timer for 60 seconds using “Do every 1 second” and Custom State. However, whenever I move away from the page it stops ticking down. When I come back to the page it starts ticking down from where I had left. How do I resolve this issue.

2 Likes
2

Hey!

The issue is that the “Do every 1 second” actions stop when you leave the page. A simple fix would be to store the remaining time in a database or a persistent Custom State. You update this value every second, and when you come back to the page, you just grab that value and pick up the countdown from where you left off.

That should fix it!

3

The simplest way to do this is use the plugin: Current Date/Time by Mintflow

This gives you an active time because in bubble when you use “Current Date/Time” it gives you the time at page load.

So using this plugin you can set the Start Time and then use Start_time - Date-Plugin’s current time: formatted as seconds to get the time you need

1 Like
4

Hey. Thanks for your reply. Can you elaborate on persistent Custom State?

5

Hey. Thanks for your reply. So my page has a group with one question to be answered within 60 seconds. And I need to disable submit button after 60 seconds and load the next question from DB. Will I be able to do this with plug in?

6

Hey. Thanks for your reply. Just to elaborate, my page has a group which displays question to be answered within 60 seconds. I disable submit button after 60 seconds and on clicking Next another question is retrieved from DB.

So what I observed is when I go to some other website in some other tab, my timer stopped ticking though the question page was still open.

Will persistent Custom State resolve this? Is there a YouTube video or any article on it?

7

If the question is a database record just save a start time value and then do a conditional check against that value for if 60 seconds have passed.

8

But that is the problem. How do I check whether 60 seconds have passed. The custom state based logic doesn’t work when I am browsing some other website.

9

The start time needs to be stored int eh database (or some other persistent storage)

10

Yes you can do it with the plugin. This plugin will allow you to see the time passed even if you leave the window.

Another method: You may also “lock” a question via scheduled workflow that happens 60 seconds after someone begins a question. Then the client side is checking the Is_Locked? field instead of relying on the front end time calculation.

First try the plugin and then move into using the DB.

11

Okay. I will try this.

12

You don’t need a plugin or a schedule workflow…

If your Question is a record in the DB, store a datetime value in the record. Otherwise just store the start time in a state instead of using a Do Every xx WF.

Whichever you choose just do a comparison check between the value above and the current time. If it’s more than 60 secs then just lock it.

13

Your approach effectively solves the problem by:

  1. Storing a precise timestamp (either in the database or in a state)
  2. Comparing it with the current time
  3. Implementing conditional logic based on this difference

To implement this solution:

// Option 1: Using a custom state
// At timer start
let startTime = Date.now();
// Store in state
$w.state.startTime = startTime;

// To check (on page load or user action)
let currentTime = Date.now();
let elapsedSeconds = Math.floor((currentTime - $w.state.startTime) / 1000);

if (elapsedSeconds >= 60) {
  // Time's up - lock functionality 
} else {
  // Display remaining time: 60 - elapsedSeconds
}

This method works perfectly regardless of whether the user leaves the page or stays on it, as time continues to advance independently of user activity.

No need for complex workflows, plugins, or interval timers that are susceptible to browser throttling. This approach is both simpler and more reliable.

1 Like
14

Hey. Thanks for the suggestion. This seems to be working with Current date/time plugin.

1 Like
15

I used custom state and stored start time for each question and then did necessary action when one minute (comparing Custom State vs Current date/time) was up. It seems to be working, Thanks.

2 Likes