01-17-2023 10:28
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-17-2023 10:28
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I'm looking for a way, if possible, to debounce a button once it has been pressed. I'm developing a watchface (Versa 3) with a central button that, when pressed, fades away for 5 seconds and then reappears. However during that fade away a user could still continually mash the button (if so inclined, or just impatient), which could cause a string of button animations to ensue.
Is there a way to debounce the button during this fade process? I appreciate any advice, thank you.
Answered! Go to the Best Answer.

- Labels:
-
clockface
-
JavaScript
-
SDK
Accepted Solutions
01-17-2023 10:41 - edited 01-17-2023 10:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
01-17-2023 10:41 - edited 01-17-2023 10:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Just an idea, but perhaps you could set pointer-events to „none“ once the button is pressed and back to „visible“ when it appears back.
Or set a boolean like „isBusy“ and only process any action on the button if isBusy === false.
Or even simpler only react on pressing the button if it’s opacity === 1 🤔
01-17-2023 10:41 - edited 01-17-2023 10:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
01-17-2023 10:41 - edited 01-17-2023 10:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Just an idea, but perhaps you could set pointer-events to „none“ once the button is pressed and back to „visible“ when it appears back.
Or set a boolean like „isBusy“ and only process any action on the button if isBusy === false.
Or even simpler only react on pressing the button if it’s opacity === 1 🤔
01-17-2023 11:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


01-17-2023 11:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I like the isBusy idea. You could reset isBusy via onanimationend, if applicable.
Gondwana Software
01-17-2023 12:04
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-17-2023 12:04
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
The busy flag is generally the way to go here. You can also use this to control other interface elements so things aren't acting over each other.
From an app I've been working on:
let isControlEnabled = true;
// ...
let ele_btn_status = document.getElementById("button_status");
ele_btn_status.addEventListener("click", (evt) => {
if (!isControlEnabled) {
return;
}
isControlEnabled = false;
// button action ...
setTimeout(() => {
isControlEnabled = true;
}, 5000); //wait 5000 ms (5 sec)
}
You may want to use onanimationend instead of setTimeout per @Gondwana 's suggestion (I haven't used this), or make the timeout dynamic by grabbing the animation element's dur property and multiplying it by 1000 to convert to ms (so if you were to change that duration you wouldn't also need to change this code)

01-25-2023 07:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-25-2023 07:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks for the suggestion. I was able to get the desired effect with the "opacity" flag!

01-25-2023 07:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
01-25-2023 07:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I'll confess it being a bit unusual, but in the use-case you described I thought it to be the most simple solution 😅

01-25-2023 07:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-25-2023 07:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I'm taking a pragmatic view towards developing this. As long as it works, I'm a happy guy 👍
01-31-2023 12:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-31-2023 12:12
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I use sth like that:
var now = this.getTimestamp(); // current time in milliseconds
var elapsedTime = now - this.lastClickTime;
if (elapsedTime <= 1000){
return; // no click this time
}
this.lastClickTime = now;
// process a click now

