JS如何实现同步逐秒打印计时器控制台日志

问题原因分析 #

• 语法错误：printTimer 函数的闭合大括号位置错误，导致后续的 setTimeout 和 callback() 不属于函数内部逻辑，代码执行顺序完全不符合预期
• 定时器无延迟：循环内的 setTimeout 没有设置第二个时间参数，所有定时任务都会被推入任务队列后立即执行，不会间隔1秒
• 回调时机错误：callback 是同步调用的，不会等待所有定时打印完成后再触发
• 全局定时器逻辑错误：全局定义的打印Timer done!的定时器没有设置延迟，也没有和前面的定时任务做顺序绑定

修正后可直接运行的代码 #

function main() {
  console.log('start a 3 second timer');
  printTimer(3, () => {
    console.log('after 3 second timer, start a 5 second timer');    
    printTimer(5, () => {
      console.log("both timers done!");
      console.log('Timer done!');
    });
  });
}

main();

function printTimer(n, callback) {
  for (let i = 0; i < n; i++) {
    // 每次延迟递增1秒，实现间隔打印效果
    setTimeout(() => {
      console.log(`${n - i} second remaining`);
    }, (i + 1) * 1000);
  }
  // 所有倒计时打印完成后再触发回调
  setTimeout(callback, n * 1000);
}

可选更易维护的async/await版本 #

避免回调嵌套，逻辑更清晰：

async function main() {
  console.log('start a 3 second timer');
  await printTimer(3);
  console.log('after 3 second timer, start a 5 second timer');
  await printTimer(5);
  console.log("both timers done!");
  console.log('Timer done!');
}

main();

function printTimer(n) {
  return new Promise(resolve => {
    for (let i = 0; i < n; i++) {
      setTimeout(() => {
        console.log(`${n - i} second remaining`);
      }, (i + 1) * 1000);
    }
    setTimeout(resolve, n * 1000);
  })
}

内容的提问来源于stack exchange，提问作者Name