Javascript: disable element on countdown to date

Question

I have a button which I disable depending on whether an datetime has passed, however, this will only work on page load, how can I set a countdown timer so that my button is disabled when the countdown to the nominationCloseDateTime is reached even if the page is already loaded.

<ctx><vars><nominationCloseDateTime>2022-05-10 04:56:00.000Z</nominationCloseDateTime></vars></ctx>

var nominationCloseDateTime = document.controller.getValue('/ctx/vars/nominationCloseDateTime');

if (nominationCloseDateTime < $.now()) {
    $('input#nominate').prop('disabled', true);
}

I've calculated the countdown to date in seconds, now whats next?

 var nominationCloseDateTimeCountDownSecs = ((new Date(document.controller.getValue('/ctx/vars/nominationCloseDateTime')).getTime()) - new Date().getTime()) / 1000;

Is the following correct?

setTimeout(() => {
  $('input#nominate').prop('disabled', true);
}, nominationCloseDateTimeCountDownSecs)

Answer 1

You want to use a setTimeout() function.

For example,

//calculate, in seconds, how much time you want the button to stay enabled.
const calculatedTimeUntilCloseDateTime;

setTimeout(() => {
  functionToDisableYourButton();
}, calculatedTimeUntilCloseDateTime)

It will work like below:

setTimeout(() => {
  console.log("Delayed for 1 second.");
}, 1000)