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

在这种情况下，您不能使用while或for循环，因为您要执行的操作不是同步的。

你可以用helper（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 2

您需要在上一个倒计时结束时重新开始倒计时，同时您同时启动它们。

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

Answer 3

您不应该使用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')
            );
        }
    });
}

如何在Javascript中循环一个函数？

3 个答案: