Question

我正在进行测验，你可以从四种答案中选择一个答案（比如谁想成为百万富翁）。我想为每个问题添加一个7secs的计数器，如果计数器结束，则应出现下一个问题的按钮。

我已经有了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添加到同一个小提琴并测试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');
});

使用jQuery测验中的多个计时器

1 个答案: