Javascript - 循环中的异步/等待计时器

Question

I'm working on a "Timeblocks" type application (for uni). The core idea being we have a list of subtasks, each with a designated time allowance. I want to be able to iterate through the tasks, use a timer to countdown the allocated time allowance then iterate 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 }
];

We would iterate through the above, counting down 1 minute each in the console.

I have that core functionality coded, the iteration itself works with async/await.

stackblitz here:

https://stackblitz.com/edit/js-87ykxt

However, the countdown itself does not properly work after the first iteration, and behaves strangely, seemingly counting down twice per second, then never actually stopping and going into minus. The interval is supposed to clear each time the timer reaches 0, then get recreated when the next iteration occurs.

Any help appreciated.

PS Also aware the first iteration takes 1 minute to begin, and I'll have to fix this too!

Answer 1

Well, I'd avoid using global variables. Better to pass parameters/values as arguments to functions. And please use 'let' and 'const' instead of 'var'. For sake of helping you understand I've shortened your code and added a few debug lines: Hopefully now its functioning as you wished (:

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

// Write Javascript code!

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

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

var interval;
var mySeconds;

function tick(task, resolve) {
  var min = Math.floor(mySeconds / 60);
  var sec = mySeconds - min * 60;

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

  var message = min.toString() + ":" + sec;

  console.log(message);

  if (mySeconds === 0) {
    alert("Done for " + task);
    clearInterval(interval);
    return resolve();
  }
  mySeconds--;
}

function resolveTimer(time, task) {
  return new Promise(resolve => {
    mySeconds = time;
    interval = setInterval(tick, 1000, task, resolve);
  });
}

async function startHandler() {
  for (let i = 0; i < todos.length; i++) {
    const time = todos[i].time;
    const task = todos[i].task;

    console.log("Starting for task:", task);
    await resolveTimer(time * 60, task);
    console.log(task, " awaited");
  }
}

Answer 2

This is how you can do, I set the timer to 5s instead of 60s for a better demonstration:

 const todos = [{ id: 1, task: "Finance", time: 1 }, { id: 2, task: "Distribution", time: 1 }, { id: 3, task: "Blah", time: 1 } ]; const taskDuration = 5; // 5 instead of 60 async function startHandler() { for (const todo of todos) { console.log('Current todo', todo.task); await countDown(todo.time * taskDuration); } } startHandler(); function countDown(time) { function tick() { const min = Math.floor(time / 60); let sec = time - min * 60; if (sec < 10) { sec = "0" + sec; } const message = min.toString() + ":" + sec; console.log(message); time--; } const interval = setInterval(tick, 1000); return promiseSetTimeout(() => clearInterval(interval), time * 1000); } // Util function to call a function later, and return a Promise function promiseSetTimeout(fun, time) { return new Promise(resolve => setTimeout(() => [fun, resolve].forEach(x => x.call()), time)); }