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