如何在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);