javascript - 计时器应该为 jquery 中的 for 循环中的每个元素开始和结束

Question

我在做游戏。游戏中有 6 名玩家。我想为每个玩家回合启动计时器。

$("#startgame").click(function() {
  $(".player").each(function() {
    $(".progressTimer").progressTimer({
      timeLimit: 20,
      warningThreshold: 10,
      baseStyle: 'progress-bar-warning',
      warningStyle: 'progress-bar-danger'
    });
  });
});

问题是计时器只启动一次并且循环执行时没有先前的元素动画停止。 如果一名球员在他的时间间隔之间轮到他。我怎样才能停止他的计时器或清除他的时间间隔并为下一个玩家启动计时器

Answer 1

问题一:“单进度条如何执行六次动画？”

for 循环是同步的，而动画是异步的。

在只有一个定时器的情况下，直到上一个动画结束，下一个动画才开始。

要解决这个问题，您需要定义一个全局变量 var i=0; , 并在 progressTimer 中增加一个参数，例如 progressTimer({...},i) .函数结束 progressTimer , 递增 i++ , if(i<6) ，再次调用自己。这样您就可以确保在上一个动画结束时执行下一个动画。

代码示例:

我在这里找到了源代码链接 progressTimer .现在我要通过修改 jquery-progressTimer/demo/index.html 下的代码来证明我的想法.

这是原作者的代码示例:

<div class="container">
   <div class="loading-progress"></div>
</div>
<script src="js/static.min.js"></script>
<script src="../dist/js/jquery.progresstimer.js"></script>
<script>
    var progress = $(".loading-progress").progressTimer({
        timeLimit: 10,
        onFinish: function () {
            alert('completed!');
        }
    });
    $.ajax({
       url:"http://localhost/"
    }).error(function(){
        progress.progressTimer('error', {
            errorText:'ERROR!',
            onFinish:function(){
                alert('There was an error processing your information!');
            }
        });
    }).done(function(){
        progress.progressTimer('complete');
    });
</script>

不用担心ajax代码，因为它只是在你无法获取这样的url时显示，进度条会完成动画并提示错误。因此，我将 ajax 代码注释掉，因为它与我们的案例无关。

这是我修改后的代码，让进度条处理了6次:

var i=0;    
function fn() {
    var progress = $(".loading-progress").progressTimer({
        timeLimit: 5,
        /* onFinish() gurantees when the animation finishes */
        onFinish: function () {
            i++;
            alert('completed!');
            if(i<6){
                fn();
            }
        }
    });
}
fn();

现在我们完成了!

---

问题二:

“如果一个玩家在他的时间间隔之间轮到他玩。我怎么能停止他的计时器或清除他的时间间隔并为下一个玩家启动计时器。”

这是基于示例代码的第二个版本:

var i=0;    
var myVar;
function fn() {
    /*Player Initial state in this turn*/
    var PlayerEndHisTurn=false;
    /*Init seconds that past*/
    var secondsPast=0;

    /*Init progress animation*/
    var progress = $(".loading-progress").progressTimer({
        timeLimit: 5,
        warningThreshold: 5,
        onFinish: function () {
            i++;
            alert('completed!');
            if(i<6){
                fn();                                   
            }
        }
    }); 

    /*We keep track of time every second*/
    myVar=setInterval(function(){
        secondsPast++;
        //console.log(secondsPast);

        /*Assume every player end his turn on the third second*/
        if(secondsPast==3){
            PlayerEndHisTurn=true;
        }
        /*If the player ends his turn*/
        if(PlayerEndHisTurn){
            /*Progress bar skips this player's turn, call complete*/
            /*No need to call i++ because we called this in onFinish()*/
            //i++;
            progress.progressTimer('complete');
            /*Stop timing for this player*/
            clearInterval(myVar);
            /*Prevent multiple interval function running*/
            return myVar;
            /*Start the next player's turn*/
            fn();
        }
        /*if the player runs out his time*/
        if(secondsPast==5){             
            clearInterval(myVar);
            return myVar;
        }
    },1000);
}
fn();