add timeout to countdown before it reset

Question

I'm working on a simple countdown using this plugin, that displays random number when it reach zero. the code is working fine just wanna add delay like 3 seconds before it start again.

Hope you help me.

thanks.

CODEPEN

let time = 10;
let progress = 0; let counter = 0
var clock = $('.my-clock').FlipClock(time, {
  countdown: true,
  count: 1,
  callbacks: {
    stop: function() {

      setTimeout(function(){
        clock.setTime(time); // proceeding time
        clock.start();

        for (let i = 0; i < 5; i++) {


            var arrResult = [];

            setTimeout(function(){
            var r = Math.floor(Math.random() * 11) + 1;    
            arrResult.push(r);


                setTimeout(function(){
                    $('.numResult div:nth-child('+ (i+1) +')').html(arrResult[i]);
                },200);

              if(arrResult.length === 5){
                $('.results ul').append('<li>'+ arrResult +'</li>');
              }


        },500 * i);

        }
      },1000);
    },
    interval: function() {
      counter && (progress+=100/time);
      counter ++;
      $('.progressBar .progress').width(progress+ '%');
      if(progress >= 100) {
        progress = 0; counter = 0;
        this.stop()
      }
    }
  }
});

Answer 1

Try having your first setTimeout wrap only clock.setTime and clock.start?

let time = 10;
let progress = 0; let counter = 0
var clock = $('.my-clock').FlipClock(time, {
  countdown: true,
  count: 1,
  callbacks: {
    stop: function() {
      
      setTimeout(function(){
        clock.setTime(time); // proceeding time
        clock.start();
      },3000);
        
        for (let i = 0; i < 5; i++) {
            
            
            var arrResult = [];

            setTimeout(function(){
            var r = Math.floor(Math.random() * 11) + 1;    
            arrResult.push(r);
              
              
                setTimeout(function(){
                    $('.numResult div:nth-child('+ (i+1) +')').html(arrResult[i]);
                },200);
              
              if(arrResult.length === 5){
                $('.results ul').append('<li>'+ arrResult +'</li>');
              }
                
            
        },500 * i);
            
        }
    },
    interval: function() {
      counter && (progress+=100/time);
      counter ++;
      $('.progressBar .progress').width(progress+ '%');
      if(progress >= 100) {
        progress = 0; counter = 0;
        this.stop()
      }
    }
  }
});

.my-clock {
  text-align:center;
  width:auto;
  display: inline-block;
}
.center {
  text-align:center;
  
}
.progressBar{
  margin: 0 auto;
  width: 400px;
  height: 6px;
  border-radius: 3px;
  background-color: #222;
}
.progress{
  background-color: green;
  height: 100%;
  width: 100%;
}
.numResult div{
  display: inline-block;
}
.results{
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.results ul{
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet">

<div class="center">
  <div class="my-clock"></div>
  <div class="progressBar">
    <div class="progress"></div>
  </div>
  <div class="numResult">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="results">
    <ul>
  </ul>
  </div>
</div>