javascript - 使用 jQuery 进行测验中的多个计时器

Question

我正在进行一个测验，您可以从四种可能的答案中选出一个答案(比如谁想成为百万富翁)。我想为每个问题添加一个 7 秒的计数器，如果计数器结束，应该会出现下一个问题的按钮。

我已经有了 jQuiz 的基本代码，但我现在的问题是，我始终使用相同的计数器实例。因此，第一个问题的计时器没问题，但如果您回答下一个问题并且第一个问题还剩一些时间，则两个计数器会同时显示。我认为当我有多个计时器实例时我的问题就会解决，但我不知道该怎么做。

这是我的代码。抱歉结构不好，我是 jQuery 新手。

---

$('.btn, .nxt').click(function(){
    $(this).addClass("checked");
    next(this);
    var el = $('#progress');
    el.width(el.width() + 116 + 'px');
});

function next(elem){
    $(elem).parents('.questionContainer').fadeOut(300, function(){
        var interval = window.setInterval(function() {
            var counter = 0;
            clearInterval(interval);
        });
        var counter = 0;

        timer();
        $(elem).parents('.questionContainer').next().fadeIn(300); 
        $('.nxt').hide();
    });
};

function timer(){
    var counter = 7;
    var interval = window.setInterval(function() {
        counter--;
        $(".counter").html(counter);
        if (counter == 0) {
            $(".counter").html('');
            $('.nxt').show();
            clearInterval(interval); 
        }
    }, 1000);    
};​

---

Answer 1

我是 Stackoverflow 的新人，在这个文本区域编辑代码对我来说太难了...已将固定 JS 添加到 jsfiddle .

尝试将 HTML 添加到同一个 fiddle 中并测试 JS，希望它能起作用。

对您要求的结构(主要是缓存选择)和添加的计​​时器数组(带注释)进行了一些修复。

添加 HTML 后调试会更容易:)

var quizObj = {
    quizTimers: [], //timers array
    $counter: $(".counter"),
    $buttons: $('.btn, .nxt'),
    $progress: $('#progress'),
    next: function(elem){
         $(elem).parents('.questionContainer').fadeOut(300, function(){ 
            //clears the FIRST timer id in the timers array and removes it from array
            clearInterval(quizObj.quizTimers.shift());

            quizObj.timer();
            $(elem).parents('.questionContainer').next().fadeIn(300);
            $('.nxt').hide();
        });   
    },
    timer: function() {
        var counter = 7;
        var interval = window.setInterval(function() {
            counter--;
            $(".counter").html(counter);
            if (counter == 0) {
                $(".counter").html('');
                $('.nxt').show();
                clearInterval(interval);
            }
        }, 1000);   

        quizObj.quizTimers.push(interval);
    }
}

quizObj.$buttons.click(function(){
    $(this).addClass("checked");
    quizObj.next(this);
    quizObj.$progress.width(quizObj.$progress.width() + 116 + 'px');
});