JavaScript延迟1秒钟遍历日期范围

Question

我正在尝试遍历日期范围，并将下一次迭代延迟1秒。 每次我在jsFiddle或Plunker中运行以下命令时，浏览器都会崩溃。

  var current_date = new Date("01/13/2013");
  var end_date = new Date("01/20/2013");
  var end_date_time = end_date.getTime();

  while (current_date.getTime() < end_date_time) {
    setTimeout(function () {
      console.log(current_date);
      current_date.setDate(current_date.getDate()+1);
    }, 1000);
  }

有人能为我指出正确的方向，为什么这不起作用以及如何解决？

Answer 1

您这里有一个阻塞循环。 它阻止了整个浏览器（可能永远！）。

while (current_date.getTime() < end_date_time) {
    // do something (it doesn't matter what)
} 

您需要的是setInterval ：

var current_date = new Date("01/13/2013");
var end_date = new Date("01/20/2013");
var end_date_time = end_date.getTime();

var interval = setInterval(function () {
    if (current_date.getTime() >= end_date_time) {
       clearInterval(interval);
    }

    console.log(current_date);
    current_date.setDate(current_date.getDate()+1);
}, 1000);

（我没有检查代码的正确性）

为什么会阻止UI？

在运行javascript代码时，用户无法与网站进行交互，也无法与整个浏览器进行交互。

当您查看浏览器随时间的变化时， while()方法看起来像

[while][while][while][while][while][while][while][while][while][while][while]

间隔方法看起来像

[interval]                        [interval]                       [interval]

仅在空闲时间，浏览器才能执行其他操作，例如处理用户交互。

Answer 2

如果条件失败，您可以简单地调用timeout ：

function incrementDate(currentDate, endDateTime) {
    currentDate.setDate(currentDate.getDate()+1);

    if (currentDate.getTime() < endDateTime) { 
        setTimeout(function() {
            incrementDate(currentDate, endTime);
        }, 1000);
    }
}

incrementDate(current_date, end_date_time);