添加测验定时器，淡出/跳到下一如果定时器达到0(Adding a Quiz Timer, Fade

我真的很新的jQuery的，但熟悉一些其他语言。 我最近买了一个竞猜型脚本，我想简单的15秒定时器添加到每一个问题。 这只是一个有趣的小测验，所以没有必要担心用户使用JavaScript播放增加时间等。

基本上，如果用户没有在15秒内选择一个问题，它会自动进入到下一个问题，计时器重新开始。

答案具有.next标签，并且选择当移动到下一个问题，如下所示（希望）的代码。

superContainer.find('.next').click(function () {

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

我的问题是，如果我用setInterval ，我不知道我可以为它淡出我们再次选择适当的股利和在未来的一个褪色。 我试过下面的代码和一些零碎的类似想法的，但它不工作，但也许它会给我虽历经是一个更好的主意。

superContainer.find('.next').click(function () {

    $active_count = $count;

    countInterval = setInterval(function() {
                $active_count--;
                if($active_count <= 0){
                    clearInterval(countInterval);
                    $active_count = $count;
                    $(this).parents('.slide-container').fadeOut(500, function () {
                        $(this).next().fadeIn(500)
                    });
                }
                $('.question-timer').html($active_count);
            }, 1000);

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

我只是一直在使用JQuery一两天，所以请原谅任何明显的失误和糟糕的代码！ 让我知道如果你需要任何其他代码或信息

Answer 1:

这是第一个jQuery的项目适度棘手。

诀窍（在这个解决方案）是分解出一个goNext功能，可以通过两种方式叫做-响应click事件，并响应于15秒setTimeout()没有setInterval()

$(function(){
    var questionTimeout = null;

    function goNext($el) {
        clearTimeout(questionTimeout);
        var $next = $el.next();
        $el.fadeOut(500, function() {
            if($next.length > 0) {
                $next.fadeIn(500, function() {
                    questionTimeout = setTimeout(function() {
                        goNext($next);
                    }, 15000);
                });
            }
            else {
                afterLastQuestion();
            }
        });
    }
    function afterLastQuestion(){
        alert("last question complete");
        $start.show();
    }

    var $superContainer = $("#superContainer").on('click', '.next', function() {
        goNext($(this).closest('.slide-container'));
        return false;
    });

    var $start = $("#start").on('click', function(){
        $(this).hide();
        $superContainer.find(".slide-container")
            .eq(0).clone(true,true)
            .prependTo(superContainer)
            .find(".next").trigger('click');
        return false;
    });
});

DEMO

该过程通过点击“开始”的链接开始，导致第一个问题被克隆，然后对克隆的“下一个”链接模拟点击。 这确保了（实际）的第一个问题是在完全相同的方式，因为所有其他治疗。

我还包括一个afterLastQuestion()函数。 修改其行动，采取一切必要的最后一个问题回答后（或超时）。

Answer 2:

你可以保持当前的问题，在一个变量，它重置在next点击和计时器，如

var $current;
superContainer.find('.next').click(function (e) {

    e.preventDefault();
    $(this).parents('.slide-container').fadeOut(500, function () {
        $(this).next().fadeIn(500);
        $current = $(this).next();
    });

});​

您只需将其设置为在初始化你的第一个问题，记得重置计时器上的next点击

此外，它通常最好使用e.preventDefault()而不是return false 。

文章来源: Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0