Using Async/Await for Timers within a Loop in Javascript

Question

Using Async/Await for Timers within a Loop in Javascript

Currently developing a "Timeblocks" style application for university. The main concept involves having a list of subtasks, each with a specified time limit. The goal is to iterate through these tasks, utilizing a timer to countdown the allocated time and then moving on to the next task. For example:

var todos = [
  { id: 1, task: "Finance", time: 1 },
  { id: 2, task: "Distribution", time: 1 },
  { id: 3, task: "Blah", time: 1 }
];

The above tasks would be iterated through, with a 1-minute countdown displayed in the console.

While I have successfully coded the core functionality, the countdown is not working correctly after the initial iteration. It seems to be counting down twice per second and then never stopping, eventually going into negative time. The interval should clear each time the timer reaches 0 and then restart when the next iteration begins.

Any assistance would be greatly appreciated.

P.S. I am also aware that the first iteration takes 1 minute to start, and I plan to address this issue as well!

Check out the code on StackBlitz here.

javascript async-await setinterval

Answer 1

Answer №1

Avoid using global variables whenever possible. It's better practice to pass parameters/values as arguments to functions. Also, consider using 'let' and 'const' instead of 'var' for variable declarations!

// Import stylesheets
import "./style.css";

// Your Javascript code goes here!

const startBtn = document.getElementById("start");
startBtn.addEventListener("click", startHandler);

const tasks = [
  { id: 1, name: "Finance", time: 0.1 },
  { id: 2, name: "Distribution", time: 0.2 },
  { id: 3, name: "Blah", time: 0.2 }
];

let countdownInterval;
let secondsLeft;

function countDownTimer(task, resolve) {
  const minutes = Math.floor(secondsLeft / 60);
  let seconds = secondsLeft - minutes * 60;

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  const message = minutes.toString() + ":" + seconds;

  console.log(message);

  if (secondsLeft === 0) {
    alert("Timer done for task: " + task);
    clearInterval(countdownInterval);
    return resolve();
  }
  secondsLeft--;
}

function executeTimer(duration, task) {
  return new Promise(resolve => {
    secondsLeft = duration;
    countdownInterval = setInterval(countDownTimer, 1000, task, resolve);
  });
}

async function startHandler() {
  for (let i = 0; i < tasks.length; i++) {
    const timeForTask = tasks[i].time;
    const taskName = tasks[i].name;

    console.log("Starting timer for task:", taskName);
    await executeTimer(timeForTask * 60, taskName);
    console.log(taskName, "timer completed");
  }
}

Answer 2

Avoid using global variables whenever possible. It's better practice to pass parameters/values as arguments to functions. Also, consider using 'let' and 'const' instead of 'var' for variable declarations!

// Import stylesheets
import "./style.css";

// Your Javascript code goes here!

const startBtn = document.getElementById("start");
startBtn.addEventListener("click", startHandler);

const tasks = [
  { id: 1, name: "Finance", time: 0.1 },
  { id: 2, name: "Distribution", time: 0.2 },
  { id: 3, name: "Blah", time: 0.2 }
];

let countdownInterval;
let secondsLeft;

function countDownTimer(task, resolve) {
  const minutes = Math.floor(secondsLeft / 60);
  let seconds = secondsLeft - minutes * 60;

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  const message = minutes.toString() + ":" + seconds;

  console.log(message);

  if (secondsLeft === 0) {
    alert("Timer done for task: " + task);
    clearInterval(countdownInterval);
    return resolve();
  }
  secondsLeft--;
}

function executeTimer(duration, task) {
  return new Promise(resolve => {
    secondsLeft = duration;
    countdownInterval = setInterval(countDownTimer, 1000, task, resolve);
  });
}

async function startHandler() {
  for (let i = 0; i < tasks.length; i++) {
    const timeForTask = tasks[i].time;
    const taskName = tasks[i].name;

    console.log("Starting timer for task:", taskName);
    await executeTimer(timeForTask * 60, taskName);
    console.log(taskName, "timer completed");
  }
}

Answer 3

Answer №2

Here's a modified version with a 5-second timer for a more efficient demonstration:

const tasks = [{
    id: 1,
    task: "Financial Planning",
    time: 1
  }, {
    id: 2,
    task: "Logistics",
    time: 1
  }, {
    id: 3,
    task: "Etc",
    time: 1
  }
];

const taskDuration = 5; // Timer set to 5 seconds

async function initiateHandler() {
  for (const task of tasks) {
    console.log('Current task', task.task);
    await countdown(task.time * taskDuration);
  }
}


initiateHandler();

function countdown(time) {
  function ticking() {
    const minutes = Math.floor(time / 60);
    let seconds = time - minutes * 60;

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

    const message = minutes.toString() + ":" + seconds;

    console.log(message);

    time--;
  }
  const timerInterval = setInterval(ticking, 1000);
  return promiseSetTimeout(() => clearInterval(timerInterval), time * 1000);
}

// Utility function to execute a function after a delay and return a Promise
function promiseSetTimeout(func, time) {
  return new Promise(resolve => setTimeout(() => [func, resolve].forEach(x => x.call()), time));
}

Answer 4

Here's a modified version with a 5-second timer for a more efficient demonstration:

const tasks = [{
    id: 1,
    task: "Financial Planning",
    time: 1
  }, {
    id: 2,
    task: "Logistics",
    time: 1
  }, {
    id: 3,
    task: "Etc",
    time: 1
  }
];

const taskDuration = 5; // Timer set to 5 seconds

async function initiateHandler() {
  for (const task of tasks) {
    console.log('Current task', task.task);
    await countdown(task.time * taskDuration);
  }
}


initiateHandler();

function countdown(time) {
  function ticking() {
    const minutes = Math.floor(time / 60);
    let seconds = time - minutes * 60;

    if (seconds < 10) {
      seconds = "0" + seconds;
    }

    const message = minutes.toString() + ":" + seconds;

    console.log(message);

    time--;
  }
  const timerInterval = setInterval(ticking, 1000);
  return promiseSetTimeout(() => clearInterval(timerInterval), time * 1000);
}

// Utility function to execute a function after a delay and return a Promise
function promiseSetTimeout(func, time) {
  return new Promise(resolve => setTimeout(() => [func, resolve].forEach(x => x.call()), time));
}

Using Async/Await for Timers within a Loop in Javascript

Answer №1

Answer №2

Similar questions

Is it possible to detect inline elements that have been wrapped?

Discover the procedure for extracting a dynamic value from JavaScript to PHP

Float two DIVs horizontally with the same height using jQuery

Encountering a syntax error with the AngularJS ng-class expression

Implementing a for loop within a scrolling function

Passing parameters from a parent component to a child component and then back to the parent component

Reposition the element at the bottom of its parent element

ES6: utilizing properties and methods of a subclass that inherit from the superclass

Are you looking to convert this JSON using underscore or any other JavaScript utility tool?

Having difficulty with Angular's ng-options feature in a Select element

The passport authentication process is currently stalled and failing to provide any results

Instructions on accessing the subsequent li a starting from a designated location

The android webview is having trouble loading HTML that includes javascript

Tips for running Typescript files on a server in the background

What steps can be taken to enable users to draw a path on a Google Map?

The variable is constantly reverting back to its initial value

javascript how to trigger a change or input event when handling a paste event

Encountering an issue in Typescript where utilizing ref in ShaderMaterial triggers an error stating: "The anticipated type is originating from the property 'ref' declared within the 'PolygonMat' type definition."

Prevent the automatic inflation of bubbles on the D3 World Map

Check if the element with the ID "products" exists on the page using JQuery. If it does, then execute a certain action