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 ，並且這可能會關閉您打開的每個彈出窗口...但是我不確定，因為我沒有所有代碼。