jquery - 循環嵌套函數和setInterval（）

可能不是最清晰的標題，但在這裏 - 我需要在頁面上顯示兩個獨立的倒計時，接受每個用戶輸入的初始值。當一個達到零時，另一個開始並倒數至零。代碼如下，並按預期工作。jquery - 循環嵌套函數和setInterval（）

我調用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循環中將Timer1中的setInterval包裝起來，這不起作用。任何想法如何更好地去做這件事？

來源

2012-12-21 Nathan

什麼是'restTime'和'goTime'？另外，你應該總是使用'Date.now（）'來獲得實際的時間，間隔是不可靠的。 – Bergi

restTime和goTime是每個計時器的持續時間。定時器與實際時間無關，它們只是提供了一個計數機制 – Nathan

for -loops不適合異步的東西。只需將其設置爲具有最終條件的計數器，就像您已經用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!"); 
});

來源

2012-12-21 03:38:35 Bergi

輝煌，謝謝。管理你的例子到我現有的代碼，得到我需要的結果。謝謝。 – Nathan

我能想到的最簡單的事情就是讓你的Timer函數有一個當前迭代的參數。每當一個定時器開始另一次時增加該值。並使用該值來確定它是否確實應該啓動下一個定時器。

來源

2012-12-21 03:37:03

jquery - 循環嵌套函數和setInterval（）

回答

相關問題