如何在Javascript中循環函數？

Question

我想用JQuery創建一個倒計時。我在數組中有不同的時間。當第一次完成時，倒計時應計入陣列中的下一次。

我嘗試用JQuery的倒計時插件來做到這一點：

var date = "2017/04/25"; 
var time = ["13:30:49", "14:30:49", "16:30:49", "17:30:49"]; 
var i = 0; 
while (i < time.length) { 
    var goal = date + " " + time[i]; 
    $("#countdown") 
     .countdown(goal, function(event) { 
      if (event.elapsed) { 
       i++; 
      } else { 
       $(this).text(
        event.strftime('%H:%M:%S') 
       ); 
      } 
    }); 
} 

這不工作...但我怎麼能做到這一點？

Answer 1

在瀏覽器中你不應該使用busy wait尤其不能。

嘗試這樣：

var date = "2017/04/25"; 
var time = ["13:30:49", "14:30:49", "16:30:49", "17:30:49"]; 
var i = 0; 
var $counter = $("#countdown"); 
function countdown() { 
    var goal = date + " " + time[i]; 
    $counter.countdown(goal, function(event) { 
     if (event.elapsed) { 
      i++; 
      if (i < time.length) { 
       countdown(); 
      } 
     } else { 
      $(this).text(
       event.strftime('%H:%M:%S') 
      ); 
     } 
    }); 
} 

Answer 2

在這種情況下，您不能使用while或for循環，因爲您要執行的操作不同步。

例如，你可以像這樣用輔助（anonynous）函數來完成：

var date = "2017/04/25"; 
var time = ["13:30:49", "14:30:49", "16:30:49", "17:30:49"]; 
var i = 0; 

(function countdown(i) { 
    if (i === time.length) return; 


    var goal = date + " " + time[i]; 
    $("#countdown") 
    .countdown(goal, function(event) { 
     if (event.elapsed) { 
     countdown(i++); 
     } else { 
     $(this).text(event.strftime('%H:%M:%S')); 
     } 
    }); 
})(0) 

Answer 3

您需要的時候前一個結束，在一分鐘重啓倒計時你開始他們都在同時。

var date = "2017/04/25"; 
var time = ["13:30:49", "14:30:49", "16:30:49", "17:30:49"]; 

function startCountdown(i) { 
    if(i >= i.length) { 
     return; 
    } 

    var goal = date + " " + time[i]; 

    $("#countdown") 
     .countdown(goal, function(event) { 
      if (event.elapsed) { 
       startCountdown(i++); 
      } else { 
       $(this).text(
        event.strftime('%H:%M:%S') 
       ); 
      } 
    }); 
} 

startCountdown(0);