2

我正在做一个测验，您可以从四个答案可能性中选择一个答案（比如谁想成为百万富翁）。我想为每个问题添加一个 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);    
};​
4

1 回答 1

2

我是 Stackoverflow 的新手，在这个 textarea 中编辑代码对我来说太难了...将固定 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');
});
于 2012-12-03T14:33:32.487 回答