Generating additional array

Question

I'm working a simple countdown that when it reach zero, it will generate 5 random numbers and add it to array one by one, and displayed also the list of results.

My problem is, it display additional result every countdown.

How can I remove that?

I tried to remove the code for the progressbar and it looks like the reason, but don't know where to transfer that.

thanks, hope you help me.

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()
      }
    }
  }
});

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<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>
<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>

@TylerRoper I think it's somethink alike a TFA system, that that makes sense to me, e.g. this code is valid for 10.. 9.. — FatalMerlin, Jul 27 '18 at 03:51
@TylerRoper can you help me [here](https://stackoverflow.com/questions/51534876/enable-and-disable-click-on-jquery) — user123, Jul 27 '18 at 04:04

score 1 · Accepted Answer · answered Jul 27 '18 at 03:55

The problem is that you're calling this.stop() in the interval function, remove it and everything works:

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;
      }
    }
  }
});

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<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>
<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>

sir can you help me [here](https://stackoverflow.com/questions/51534876/enable-and-disable-click-on-jquery). — user123, Jul 27 '18 at 04:02

Generating additional array

1 Answers1