Question

我正在尝试运行顺序倒计时器，但无法弄清楚如何等待计时器完成，然后再转到下一个项目。

for(var i = 0; i < 5; i++)
{
    var count = 5;
    var counter = setInterval(timer, 1000);
}

function timer()
{
    count--;
    if (count <= 0)
    {
        $('.workout-timer').text(count + "secs");
        clearInterval(counter);
        return;
    }

    $('.workout-timer').text(count + "secs");
}

这只是消极的，但没有for循环，代码从5倒数到0就好了。所以我的问题是如何一个接一个地进行几次倒计时？计时器不是正确的方法吗？

Answer 1

你可以这样做：

function startCountdown(count, delay, callback) {
    if (!count) {
        callback && callback();
        return;
    }

    //do something here
    console.log(count);

    setTimeout(function () {
        startCountdown(--count, delay, callback);
    }, delay);
}

startCountdown(5, 1000, function () {
    startCountdown(5, 1500);
});

然而，如果你有很多嵌套回调，这可能会变得混乱，但是这可以用来处理这个问题的方法中的一个：

var queue = [
        { count: 5, delay: 1000 },
        { count: 10, delay: 200 },
        { count: 5, delay: 5000 }
    ];

processNextCountdown();

function processNextCountdown() {
    var options = queue.shift();

    if (options) {
        startCountdown(options.count, options.delay, processNextCountdown);
    }
}

Answer 2

Intervals就像超时一样，会重新安排自己的时间（differs从超时开始新的超时时间。由于间隔重新安排自己，只创建一个。（或者，只有真正必要的数量。）

原帖的问题是创建 5 间隔（因为它们是在循环中创建的），然后只保留最后一个的间隔ID（在counter中）间隔创建！因此clearInterval仅停止了最后一个间隔，其他4个间隔保持运行并且正在运行...

以下是一些带注释的清理代码，没有原始问题：

var count = 5;
// only need ONE interval
var counter = setInterval(timer, 1000);
// so we do one count RIGHT NOW
timer();

function timer() {
  // display first, so we start at 5: 5, 4 .. 1
  console.log(count);
  count--;
  if (count < 0) {
    // to repeat the count, comment out the clearInterval
    // and do `count = 5;` or similar .. take it from here :D
    clearInterval(counter);
  }
}

要为每个倒计时创建单独的“状态”，请创建一个新的倒计时对象，以维护属性或use a closure中的状态。这是一个带闭包的例子。我还添加了对回调函数的支持，以显示如何使这样的函数更通用：

function makeCountdown(startCount, delay, fn) {
    fn = fn || function (i) {
       // default action, if fn not specified
       console.log(i);
    };
    // local variables
    var count = startCount;
    var counter = setInterval(timer, delay);
    timer();

    function timer() {
        // now count and counter refer to variables in the closure (keyword!)
        // which are different each time makeCountdown is called.
        fn(count);
        count--;
        if (count < 0) {
            clearInterval(counter);
        }
    }
}

makeCountdown(20, 500); // uses default function
makeCountdown(10, 1000, function (i) { console.log(10 - i) });
makeCountdown(5, 2000, function (i) { console.log("SLOW! " + i) });

锻炼：

在倒计时“完成”时添加回调函数，以便倒计时可以连续运行。
使用系列生成器并使用它生成下一个count值。
让makeCountdown返回一个可用于控制倒计时的对象。
玩得开心！

循环Javascript计时器

2 个答案: