Question

可能不是最清晰的标题，但是这里 - 我需要在页面上显示两个独立的倒计时，接受每个的起始值的用户输入。当一个达到零时，另一个启动并倒计时到零。代码如下，并按预期工作。

我调用Timer1函数，该函数检查变量的起始值，如果存在，则计数开始。当计数为零时，我清除间隔，将显示重置为起始值，并触发第二个计时器，如果它有一个值：

    function Timer1() {
        var gDuration = goTime;
        countdown = setInterval(function () {
            if (gDuration >= 0) {
                $("#durationValue").html(ToTime(gDuration));
                gDuration--;
            }
            else {
                clearInterval(countdown);
                $("#durationValue").html(ToTime(goTime));
                if (restTime != 0) {
                    Timer2();
                }
            }
        }, 1000);
    }

    function Timer2() {
        var rDuration = restTime;
        countdown = setInterval(function () {
            if (rDuration >= 0) {
                $("#restValue").html(ToTime(rDuration));
                rDuration--;
            }
            else {
                clearInterval(countdown);
                $("#restValue").html(ToTime(restTime));
            }
        }, 1000);
    }

下一步是允许该进程运行一定数量的循环 - 我尝试在for循环中将TimerIn中的setInterval包装起来，这不起作用。任何想法如何更好地解决这个问题？

Answer 1

for - 循环不适用于异步内容。只需将其作为具有结束条件的计数器，就像您已经使用g/rDuration进行了演示一样。

有一些回调抽象，以及重度延续传递风格：

function timer(el, duration, interval, callback) {
    var countdown = setInterval(function() {
        if (duration-- >= 0) {
            el.text(ToTime(duration));
        } else {
            clearInterval(countdown);
            callback();
        }
    }, interval);
}

var goTime = …, restTime = …;
function t1(cb) {
    timer($("#durationValue"), goTime, 1000, cb);
}
function t2(cb) {
    timer($("#restValue"), restTimer, 1000, cb);
}
var loops = …;
(function loop(cb) {
    t1(function(){
        t2(function() {
            if (loop-- >= 0)
                loop(cb);
            else
                cb();
        });
    });
})(function() {
    alert("finished!");
});

Answer 2

我能想到的最简单的事情是让你的Timer函数有一个当前迭代的参数。每当一个计时器再次启动时增加该值。并使用该值来确定它是否应该确实启动下一个计时器。

Jquery - 使用嵌套函数和setInterval（）循环

2 个答案: