计时器应在jquery中的forloop中的每个元素开始和结束

时间:2018-09-19 13:06:11

标签: javascript jquery

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

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

问题是计时器仅启动一次,并且循环执行而之前的元素动画没有停止。 如果一位玩家在自己的时间间隔之间进行转弯。我该如何停止他的计时器或清除他的时间间隔并为下一位玩家启动计时器

1 个答案:

答案 0 :(得分:1)

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

您正确的是,因为循环是同步的,动画是异步的

在只有一个计时器的情况下(直到上一个动画完成之前),下一个动画开始。

要解决此问题,您需要定义全局变量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();