javascript - 如何在 Javascript 中运行 3 秒后再次倒计时？

Question

从 10 到 1 的循环倒计时工作正常，但我想在暂停 3 秒后再次开始倒计时(从 10 到 1 不重新加载)。我曾尝试在 setTimeOut 中使用 setTimeOut，但它不起作用。这是代码。

var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 10;

countdownNumberEl.textContent = countdown;

setInterval(function() {
  countdown = --countdown <= 0 ? 10 : countdown;

  countdownNumberEl.textContent = countdown;
  
  setInterval(function(){
 countdownNumberEl.textContent = countdown;

  },3000)
}, 1000);

<div id="countdown">
  <div id="countdown-number"></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>

Answer 1

只需添加 3 秒作为初始值并在 textContent 小于 10 时更改它

let countdownNumberEl = document.getElementById('countdown-number');
let countdown = 10;

countdownNumberEl.textContent = countdown;

setInterval(function() {
  countdown = --countdown <= 0 ? 13 : countdown;

  if (countdown > 10) {
     return;
  }
  countdownNumberEl.textContent = countdown;
}, 1000);

<div id="countdown">
  <div id="countdown-number"></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>