JavaScript计时器仅工作一次+引导3个模态

Question

大家！ 我是JavaScript新手。

我正在进行在线测试，在测试过程中几次出现问题。 每个问题都必须有一个计时器。 不幸的是，我的计时器仅在第一个问题期间有效。

<button type="button" class="btn btn-default btn-lg" id="timer">10</button>

这是我的timer（）：

function timer(){
    var obj=document.getElementById('timer');
    obj.innerHTML--;

    if(obj.innerHTML<=3){
        $('#timer').removeClass("btn-default");
        $('#timer').addClass("btn-danger");
    }

    if(obj.innerHTML==0){
        $('#myModalTest').modal('hide');
        setTimeout(function(){},1000);
        play();
    }
    else{setTimeout(timer,1000);}
}

这是我的问题弹出的方式：

$("#start").click(function() {
    setTimeout(function() {
        pause();
        $('.test1').modal('show');
        setTimeout(timer,1000);
    }, 10000);      
});

$("#continue1").click(function() {
    setTimeout(function() {
        pause();
        $('.test2').modal('show');
        setTimeout(timer,1000);
    }, 10000);
});

在.test2上，计时器始终为10，并且不起作用。

我也想知道如何弹出下一个问题，如果用户没有单击任何内容并且计时器已变为0，并且模式已隐藏。

感谢您的时间和关注。

Answer 1

我试图在此jsbin中重现您的问题，但不确定我所做的是否是您想要的。 试试看，给我反馈。

我认为您的问题在这里：

function timer(){

    if(obj.innerHTML==0){
      ...
    }
    else{setTimeout(timer,1000);} // here 
}

如果obj.innerHTML !== 0将每秒调用一次timer ，并且这可能会关闭您打开的每个弹出窗口...但是我不确定，因为我没有所有代码。