為什么我的代碼在計時器結束后一次又一次輸出？

Question

我不確定為什么測驗完成時（在50秒之前）兩次，而計時器結束時又兩次輸出。 這給我的數據庫造成了問題，該數據庫一直兩次輸入數據。 我使用了預先編寫的jquery-1.9.1.min.js和watch.js 。 我下面顯示的代碼是我編寫的代碼。 計時器設置為50秒。 這是我的問題的一個例子：

Output after: 20 sec         Output after:50 sec
    Answer: 3                      Answer: 3
    Wrong: 6                       Wrong: 6
    Unanswered: 4                  Unanswered: 4
    Score: 50                      Score:50

                                   Answer: 3
                                   Wrong: 6
                                   Unanswered: 4
                                   Score: 50

index.php代碼的第一部分是連接到數據庫，並從一個測驗表中調用所有數據，該測驗包括問題（每個答案4個）和一個“下一步”按鈕。

//這里是定時器功能的地方

<div id="demo1" class="demo" style="text-align:center;font-size: 25px;">00:00:00</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/watch.js"></script>
<script>
$(document).ready(function(){
    $('#demo1').stopwatch().stopwatch('start');
    var steps = $('form').find(".questions");
    var count = steps.size();
    steps.each(function(i){
        hider=i+2;
        if (i == 0) {   
            $("#question_" + hider).hide();
            createNextButton(i);
        }
        else if(count==i+1){
            var step=i + 1;
            //$("#next"+step).attr('type','submit');
            $("#next"+step).on('click',function(){

               submit();

            });
        }
        else{
            $("#question_" + hider).hide();
            createNextButton(i);
        }

    });
    function submit(){
         $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: $('form').serialize(),
                        success: function(msg) {
                          $("#quiz_form,#demo1").addClass("hide");
                          $('#result').show();
                          $('#result').append(msg);
                        }
         });

    }
    function createNextButton(i){
        var step = i + 1;
        var step1 = i + 2;
        $('#next'+step).on('click',function(){
            $("#question_" + step).hide();
            $("#question_" + step1).show();
        });
    }
    setTimeout(function() {
          submit();
    }, 50000);
});
</script>

</body>
</html>

下一個文件ajax.php是顯示我的結果以及解決問題的位置。

$response=mysql_query("select id,question_name,answer from questions");
     $i=1;
     $right_answer=0;
     $wrong_answer=0;
     $unanswered=0;
     while($result=mysql_fetch_array($response)){ 
           if($result['answer']==$_POST["$i"]){
               $right_answer++;
           }else if($_POST["$i"]==5){
               $unanswered++;
           }
           else{
               $wrong_answer++;
           }
           $i++;
     }
     echo "<div id='answer'>";
     echo " Right Answer  : <span class='highlight'>". $right_answer."</span><br>";

     echo " Wrong Answer  : <span class='highlight'>". $wrong_answer."</span><br>";

     echo " Unanswered Question  : <span class='highlight'>". $unanswered."</span><br>";
     $total=$right_answer+$wrong_answer+$unanswered;
     $score=($right_answer/$total)*100;
     echo " Your Score : <span class='highlight'>". $score."</span> <br>";
     echo "</div>";

$taken = 1;
//insert athlete score
$myscore = "INSERT INTO quiz_results (athlete, score, taken) VALUES ('$_SESSION[loginname]' , '$score', '$taken')";

echo "</br>";
$results= mysql_query($myscore,$con);
 if($results)
 echo "Score inputted";

Answer 1

您兩次調用了commit函數：一次是單擊某個人的下一個按鈕，第二次是50秒后-與用戶的任何操作無關。 只需計算一下submit()調用即可。

Answer 2

由於用戶單擊了最后一個“下一步”按鈕，因此您應在調用submit()之前取消超時。

調用setTimeout()返回超時的ID。 您可以使用它來取消超時。

var timeoutId = setTimeout(function() {
    submit();
}, 50000);

然后，當用戶回答最后一個問題並單擊“下一步”按鈕時：

clearTimeout(timeoutId);
submit();