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

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

为什么会阻止用户界面？

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

JavaScript循环通过日期范围，延迟1秒

2 个答案: