进度栏未同步到倒数计时

时间：2018-08-03 05:49:39

标签： jquery

我正在做一个简单的倒计时，进度条在倒数的同时增加并显示一个随机数，并在10秒后再次重置。 第一次尝试有效，但第二次尝试不再同步。如果我把这行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();
      },10000);
        
        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;
}
<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>

1 个答案:

答案 0 :(得分：1)

我也有一段时间对此感到迷惑。
时间问题通常是微不足道的。

问题是... interval回调在数字翻转动画的开始处触发 （延迟时间为1秒）。

因此，肉眼可见，在第一次回调触发时显示的数字是10 ...并且刚开始翻转到09。由于您还有10秒的时间，因此您现在不想升级进度条。向左（或说9.99秒）。这就是为什么您进行counter && (progress+=100/time);相当于if(counter){progress+=100/time;}的原因。

这会在progress上创建一个“迭代跳过” ...并且每次counter等于0时，它就会偏移1。请参见此处：

console.clear();

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

      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() {

      // Check for that progress being consoled to zero TWICE on load.
      console.log("progress: "+progress);
      
      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>

因此，跳过了非常第一迭代（页面加载），您的回调“定时”现在与翻转动画的结尾对齐（人眼）。没错，您不必再次“跳过”迭代。

因此，当progress等于100时，将progress重置为0 ...但是将counter重置为1！这样您就不会再跳过了。看到这里：

console.clear();

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

      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() {

      // Check for that progress being consoled to zero TWICE on load.
      console.log("progress: "+progress);
      
      counter && (progress+=100/time);
      counter ++;

      $('.progressBar .progress').width(progress+ '%');
      
      if(progress == 100) {
        progress = 0; counter = 1;
      }
    }
  }
});
.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>

所以现在，进度栏和活动时钟保持对齐。好。但是您当然会注意到，进度栏永远不会回到0。并且，当翻转开始！

时，进度栏会更新。

那是因为进度条更新没有像Flipclock这样的动画延迟。那么，为什么不使用animate()的宽度而不使用.width()呢？

$('.progressBar .progress').animate({"width":progress+ '%'},1000,"linear");

查看此处：

console.clear();

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

      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() {
      
      if(progress == 0){
        $('.progressBar .progress').width("0%");
      }
      
      counter && (progress+=100/time);
      counter ++;

      $('.progressBar .progress').animate({"width":progress+ '%'},1000,"linear");
      
      if(progress == 100) {
        progress = 0; counter = 1;
      }
    }
  }
});
.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>

当.width()为0时，progress仍然有用，因为您不想看到动画从100到10 ...但是从0到10。这就是添加条件的原因。 / p> 

if(progress == 0){
  $('.progressBar .progress').width("0%");
}

最后一个代码段将是您的解决方案...;）

我在此CodePen中保留了用于调查该问题的所有控制台日志。

相关问题
最新问题