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

我有一个用来运行进度条的

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

$（文档）.ready（函数（）{
得分=0；
问题(u)计数器=1 ;；
var计数器=25；
var num_q=5；
对于（var x=0；x15）{
$（“#计时器”）.attr（“类”，“进度条”“进度条成功”）；
}否则如果（计数器<15&&计数器>6）{
$（“#计时器”）.attr（“类”，“进度条”“进度条警告”）；
}否则如果（计数器<6）{
$（“#计时器”）.attr（“类”，“进度条”“进度条危险”）；
beep（）；
}
如果（计数器==0）{
$（“#q#U头”）.html（“问题”+问题计数器）；
问题(u counter++)；
间隔时间；
}
}, 1000);
$（“.btn”）。单击（函数（事件）{
$（“.btn”）.prop（“禁用”，真）；
console.log（$（this.id）；
分数=分数+计数器；
$（“#scoreshow”）.html（“当前分数”+分数+”）
间隔时间；
计数器=25；
$（“.btn”）.prop（“禁用”，假）；
});
}
});

如何实现“计时器循环”

---

编辑

---

这基本上适用于“测验”应用程序，其中计时器运行“x”秒，在此期间，如果用户回答，剩余时间将添加到他/她的分数中，下一个问题将显示“重置”计时器。如果计时器已用完，则显示下一个问题，不增加分数和“重置”计时器。

感谢@Barmar提供的简单答案。

---

只需从两个位置删除

clearInterval（）

，它就可以完美地工作。正如正确所说，

setInterval（）

无论如何都是一个循环，相比于

setTimeout（）

setInterval

已经在循环中运行函数，为什么需要在循环中调用它？当页面加载时启动它，当用户按下按钮时清除它，然后在用户进行更改后再次启动它。@Barmar我刚刚添加了一个编辑。“请查查澄清情况。”巴尔马，我想我明白你的意思了。我会试试看。谢谢！：）