javascript - Jquery setTimeout 方法在更改事件上触发

Question

我有一个系统，每个问题都有时间。现在是 10 秒。如果学生在这段时间内没有标记答案，则该问题将被下一个问题取代。如果他标记了答案，他就会立即进入下一个问题。 我在第一种情况下使用 jquery 的 setTimeout 方法，它工作正常。对于第二部分，我无法提出解决方案。在这种情况下，我正在考虑在单选按钮上使用 .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。