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

Running a setInterval() timer in a loop - jQuery/JS

本文关键字：计时器 -jQuery JS 循环 运行 setInterval      更新时间：2023-09-26

我有一个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"秒，在此期间，如果用户回答，剩余时间将添加到他/她的分数中，下一个问题将显示为"重新设置"计时器。如果计时器已经用完，则显示下一个问题，而不添加分数和"重新设置"计时器。

感谢@Barmar的简单回答
只需从两个位置移除clearInterval()，它就可以完美工作。正如正确地说的，与setTimeout()相比，setInterval()无论如何都是一个循环。

相关文章：