问计时器应该为jquery中forloop中的每个元素开始和结束
EN

Stack Overflow用户

提问于 2018-09-19 13:06:11

回答 1查看 147关注 0票数 1

我在做一个游戏。这个游戏有6个玩家。我想为每个玩家启动计时器。

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

问题是计时器只启动一次，循环执行时不会停止之前的元素动画。如果一名球员在他的中场休息时轮到他。我如何停止他的计时器或清除他的时间间隔并为下一个玩家启动计时器？

javascript

jquery

回答 1

Stack Overflow用户

发布于 2018-09-19 13:46:02

问题I:“如何使用单个进度条执行动画六次？”

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

现在我们完成了！

问题II:

“如果一名球员在他的时间间隔内轮流比赛，我如何停止他的计时器或清除他的时间间隔，并为下一名球员启动计时器。”

以下是基于示例代码的第二个版本：

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