UI Button glitching upon lost bluetooth connection

[tpar]

Hello,

I created a simple clockface that uses a text button. When the text button is clicked, I make the button disappear, and use setInterval() to wait 30seconds before making the button reappear. I notice on steady Bluetooth connection, the clockface works as expected. However, I notice that when my phone is turned off, or the Bluetooth connection is closed, the button doesn't work as expected. Rather than reappearing every 30seconds, the button reappears every 4-10 seconds. This greatly impacts the functionality of my clockface app. 

const myButton = document.getElementById("button-1");

function buttonClickListener(){
  display.poke();
  myButton.style.display = "inline";
}

myButton.addEventListener("click", (evt) => {
    myButton.style.display = "none";
    console.log("button clicked");
    setInterval(buttonClickListener, 30000)
});

Does anyone know what I can do to fix this issue? Am I missing some key component for this to work?

Thanks!

[Gondwana · Accepted solution]

It wouldn't surprise me if the bluetooth thing is a red herring.

It's possible that every click is going to add a new eventListener, even if a previous one was still waiting (ie, its interval had not yet expired). This could give the appearance that a shorter interval was happening, but what really happens is that the first interval still expires 30 seconds after it was started, regardless of when a second interval was set.

A way around this is to make use of the value returned by setInterval. You can use it to check whether a listener was still pending and, if it is, clear it before establishing a new one. You'll need to set the value to undefined in your listener.

[tpar]

Hi, thank you for your quick response.

That seemed to do the trick!