JQuery setTimout метод триггера при событии изменения

Question

У меня есть система, в которой есть время для каждого вопроса. На данный момент его 10 секунд. Если ученик не отметит ответ в это время, этот вопрос будет заменен следующим. Если он отметит ответ, он поднимет его на следующий вопрос. Я использую метод setTimeout jquery для первой ситуации, и он работает нормально. Во второй части я не могу решить проблему. В этой ситуации я думаю использовать функцию .change на переключателе. Мой вопрос заключается в том, как мне будет возможно показать следующий вопрос и скрыть текущий ход изменений и сохранить временной интервал для этого вопроса. Время и количество вопросов на самом деле случайны. Может ли кто-нибудь помочь?

Это то, что я сделал:

$('.main_list').children().hide(); 
var q_count = $('.main_list').children().length; 
$('.main_list').children('.show-questions1').show(); 
//timerHere(); 
// time here and countdown are timers that should also be updated when //questions are changed. 
//countdown(10, '#qtime'); 
setInterval(function() { 
    $('.main_list').children('.show-questions1').hide(500); 
}, 60000); 
var i = 2; 


    var et = setInterval(function(){ 
     if(i>2){ 
      $('.main_list').children().hide(); 
     } 

     $('.main_list').children('.show-questions'+i).show(400); 
     //timerHere(); 
     //countdown(10, '#qtime'); 
     i= i+1; 

     if(i>q_count){ 

      clearInterval(et); 
     } 
    },60000); 


    $('.check_question').on('change', function(e) { 

     var f = $(this).parentsUntil('.options').closest('div').parent().closest('div').attr('class'); 
     if ($('.'+f).next('div').length) 
     { 
      $('.'+f).hide(400); 
      $('.'+f).next().show(500); 
      //timerHere(); 
      //countdown(10, '#qtime'); 
      i=i+1; 
     } else { 
      clearInterval(et); 
      $('.hide').removeClass('hide'); 
      return false; 
     } 

    }); 

Answer 1

Использование clearTimeout Javascript функция, чтобы отменить событие таймера отложенного.

http://www.w3schools.com/jsref/met_win_cleartimeout.asp

var timeout; 

function ChangeQuestion() { 
    // hide current question 

    // show next question 

    clearTimeout(timeout); 
    timeout = setTimeout(ChangeQuestion, 10000); 
} 

Вызов ChangeQuestion на радиокнопки click.

Answer 2

видеть эту ссылку https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout

и следующий код .. я надеюсь, что этот код полезным для вас

var app = { 
 
    questionIndex: 0, 
 
    question: [ 
 
    "a","b","c","d" 
 
    ], 
 
    timer: null, 
 
    delayTime: 10000, 
 
    start: function(){ 
 
    document.write("start exam...<br/>"); 
 
    setTimeout((function(){ 
 
     this.printQuestion(); 
 
    }).bind(this), this.delayTime); 
 
    }, 
 
    printQuestion: function(){ 
 
    var _this = this; 
 

 
    document.write("question " + this.questionIndex + ": " + 
 
    this.question[this.questionIndex] + 
 
    "<br/>" + 
 
    "<button type='button' onclick='app.answer(" + this.questionIndex + ")'>answer</button>" + 
 
    "<br/>"); 
 

 
    if(this.question.length-1 > this.questionIndex){ 
 
     this.timer = setTimeout(function(){ 
 
      _this.questionIndex++; 
 
      _this.printQuestion(); 
 
     }, this.delayTime); 
 
    }else{ 
 
     alert("end exam"); 
 
    } 
 
    }, 
 
    answer: function(idx){ 
 
    if(this.timer) clearTimeout(this.timer); 
 

 
    if(this.question.length-1 > this.questionIndex){ 
 
     this.questionIndex++; 
 
     this.printQuestion(); 
 
    }else{ 
 
     alert("end exam"); 
 
    } 
 
    } 
 
}; 
 

 
$(document.body).ready(function(){ 
 
    app.start(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>