Question

我有一个setInterval()计时器，用于运行进度条。现在，当计时器结束或按下特定按钮时，我想取消计时器，在页面上进行一些更改，然后再次重新启动整个计时器功能。显然，正常for()循环在这种情况下不起作用，因为我想等到计时器自己完成或按下按钮。

以下是代码：

$(document).ready(function(){
score = 0;
question_counter = 1;
var counter = 25;
var num_q = 5;

for(var x=0; x < num_q; x++){
    //Loop the timer function here
}

function timer_loop(){
    var interval = setInterval(function() {
        counter--;
        $("#timer").attr("style","width: "+ ((counter/25)*100) +"%;");
        $("#timeleft").html("TIME LEFT &nbsp; <b>" + counter + "s</b>")
        if(counter < 20 && counter > 15){
            $("#timer").attr("class","progress-bar progress-bar-success");
        }else if(counter < 15 && counter > 6){
            $("#timer").attr("class","progress-bar progress-bar-warning");
        }else if(counter < 6){
            $("#timer").attr("class","progress-bar progress-bar-danger");
            beep();
        }
        if (counter == 0) {
            $("#q_header").html("Question " + question_counter);
            question_counter++;
            clearInterval(interval);
        }
    }, 1000);

    $(".btn").click(function(event){
        $(".btn").prop("disabled", true);
        console.log($(this).id);
        score = score + counter;
        $("#scoreshow").html("CURRENT SCORE &nbsp;<b>" + score + "</b>")
        clearInterval(interval);
        counter = 25;
        $(".btn").prop("disabled", false);
    });
    }
});

如何实现这个“定时器循环”？

修改
这基本上是针对“测验”应用程序，其中计时器运行“x”秒，在此期间如果用户回答，则将剩余时间添加到他/她的分数，并且使用“重置”计时器显示下一个问题。如果计时器用完了，则会显示下一个问题，但不会添加分数和“重置”计时器。

Answer 1

感谢@Barmar的简单回答只需从两个地方删除clearInterval()，它就可以完美运行。正如所说，与setInterval()相比，setTimeout()无论如何都是一个循环。

在循环中运行setInterval（）计时器 - jQuery / JS

1 个答案: