Enqueue function to execute after currently running function is done executing (setTimeout)

Question

I have a basic timer where a user puts in a number, then it counts down until it hits 0.

I want the user to put another number while the timer for the prev is still going on. When the timer for the prev number hits 0, a new timer for the recently entered number will begin. My code somehow has both timers running concurrently despite my uses of setInterval and setTimeout.

    

  
    
    
    
    Document
  
  
  
    Timer
    Timer Duration:

q() is my awful attempt at trying to implement this. countDown() is the standalone implementation of the countdown, separate from this functionality.

EDIT: Why does the snippet not run my code but the browser does???? Not sure how to fix this

user_6243352 · Answer

Good try, but each interval has no way of triggering the next one to start with a callback, and without that, they'll all run concurrently. Pass the q.shift()() in as a callback to the timer function which can be invoked when the timer runs out alongside clearTimeout, or write a loop and only run the 0-th timer if it exists.

Another problem: setTimeout is often mistaken to be perfectly accurate, but this is an incorrect assumption. The ms parameter only guarantees the timer will be invoked no sooner than the duration specified. The consequence of this is that it will accumulate drift. A more accurate approach is to use a date object to check the system's time.

Here's a proof-of-concept using the polling version:

const enqueueTimer = () => {
  const sec = +els.data.value;

  if (!Number.isInteger(sec)) {
    els.timer.innerHTML = "Not a number!";
  }
  else if (sec < 0) {
    els.timer.innerHTML = "Invalid timer setting!";
  }
  else {
    timers.push({duration: sec * 1000});
  }
};

const updateTimers = () => {
  if (!timers.length) {
    return;
  }

  const {duration, start} = timers[0];
  const now = new Date();

  if (!start) {
    timers[0].start = now;
  }

  const elapsed = now - start || 0;
  const remaining = duration - elapsed || 0;
  const sec = remaining / 1000;
  const ms = remaining % 1000;
  els.timer.innerHTML = `${~~sec}.${("" + ms)
    .slice(0, 2).padEnd(2)}`;
  els.btn.innerHTML = "Ticking!";

  if (elapsed >= duration) {
    timers.shift();

    if (timers.length) {
      timers[0].start = new Date(start.getTime() + duration);
    }
    else {
      els.data.value = "";
      els.btn.innerHTML = "Start";
      els.timer.innerHTML = "Countdown complete";
    }
  }
};

const els = {
  btn: document.getElementById("btn"),
  data: document.getElementById("data"),
  timer: document.getElementById("timer"),
};
els.btn.addEventListener("click", enqueueTimer);
const timers = [];
setInterval(updateTimers, 100);

Timer
Timer Duration:

If it bothers you that the interval always runs, feel free to save the interval id, add a clearInterval() on the id when all the timers expire and kick off a new interval when a fresh timer is created.

Enqueue function to execute after currently running function is done executing (setTimeout)

1 Answers