How a run count down again after 3 seconds in Javascript?

Question

The circular count down from 10 to 1 is working properly but I want to start the count down again (from 10 to 1 without reload) after a pause of 3 seconds. I have tried using a setTimeOut within a setTimeOut but it is not working. Here is the code.

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

just add 3 sec as initial and change textContent when it will be less then 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>