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]

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