javascript - 生成附加数组

Question

我正在做一个简单的倒计时，当它达到零时，它将生成 5 个随机数并将其逐一添加到数组中，并显示结果列表。

我的问题是，它每次倒计时都会显示额外的结果。

我怎样才能删除它？

我试图删除进度条的代码，看起来是这个原因，但不知道将其转移到哪里。

谢谢，希望你能帮助我。

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>

Answer 1

问题是你在 interval 函数中调用 this.stop() ，删除它，一切正常:

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>