循环的Javascript计时器

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从超时开始新的超时）。由于时间间隔重新安排，只能创建一个。 （或者说，只多达真的有必要。）

与原来职位的问题是，它是创造区间（因为它们是在循环中创建），然后只保留间隔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) }); 

练习：

1. 添加时倒计时“完成”，这样的回调函数倒计时可以连续运行。
2. 消耗一系列生成器并使用它生成下一个count值。
3. 已有makeCountdown返回可用于控制倒数的对象。
4. 玩得开心！