[SOLVED] Run a function only for a set amount of time with Javascript (no jQuery)

Issue

I am a newbie.

How do I call a function for a set amount of time, say 3000 milliseconds? I have tried setInterval and setTimeout but they don’t work.

if (budgeting === '' || budgeting.indexOf('e') > -1 || budgetValue < 0) {
  let errorHandler = document.createElement('div');
  let textErrorHandler = document.createTextNode('Oops! The balance you entered is invalid. Try again!')
  errorHandler.style.width = '500px';
  errorHandler.style.height = '20px';
  errorHandler.style.background = 'coral';
  errorHandler.style.float = 'left';
  errorHandler.appendChild(textErrorHandler);
  document.body.append(errorHandler);
}

The above is my code currently. What I’m trying to do is display an error message box for 3 seconds(3000 milliseconds), but I want it to only display each time the error occurs, i.e, only once.

Solution

When displaying the error, set a timeout to hide it again after an interval. If there’s a timeout running when setting the timeout, clear it and set a new one.

The following is a basic implementation. The "Show error" button can be clicked as often as required, it will only show one message, only set one timeout at a time and only linger for the specified interval after the last click:

let showError = (() => {
  let timeoutID;
  return () => {
    let el = document.getElementById('err0');
    el.style.visibility = 'visible';
    // Clear timeout if one might be running
    if (timeoutID) clearTimeout(timeoutID);
    // Set timer for 1,000 ms (1 second), clear timeoutID when finished
    timeoutID = setTimeout(()=>{
      el.style.visibility = 'hidden'; 
      timeoutID = null;
    }, 1000);
  };
})();
#err0 {
  visibility: hidden;
  color: red;
}
<button onclick="showError()">Show error</button>
<span id="err0">Error</span>

Answered By – RobG

Answer Checked By – Mary Flores (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.