0

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

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 就好了。所以我的问题是如何一个接一个地进行几个倒计时？计时器不是正确的方法吗？

4

2 回答 2

1

间隔就像会重新安排自己的超时（这与开始新超时的超时不同）。由于间隔会自行重新安排，因此只创建一个. （或者，只有真正需要的数量。）

原始帖子的问题在于它创建了5 个间隔（因为它们是在循环中创建的），然后只保留counter创建的最后一个间隔的间隔 ID（in ）！因此，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);
  }
}

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

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) });

练习：

  1. 添加倒计时“完成”时的回调函数，以便可以连续运行倒计时。
  2. 使用一个系列生成器并使用它来生成下一个count值。
  3. 返回makeCountdown一个可用于控制倒计时的对象。
  4. 玩得开心！
于 2013-05-14T05:53:58.177 回答
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);
    }
}
于 2013-05-14T05:47:30.627 回答