如何使用setTimeOut在Javascript中的指定時間段中更改文本？

Question

我編寫了一個Javascript代碼，該代碼首先評估本地計算機的當前時間，並根據指定的時間塊顯示文本/消息。 例如，消息將在時間段00 Hrs-04 Hrs之間為“ Notification-1”。 因此，在24小時內有6個時間段（例如，從00 Hrs到04 Hrs，從04 Hrs到08 Hrs ..... 20 Hrs到00 Hrs）。

如果打開新的瀏覽器，我的代碼運行良好，但是在刷新瀏覽器之前，它不會自動更改文本。

我的問題是：我需要根據指定的時間段，文本/消息應該自動旋轉而無需刷新頁面。

我知道PHP但Java語言沒有經驗，而且不知道如何使用setTimeOut。 其次，如果是無限循環或遞歸，是否會過度消耗機器資源？

我的工作代碼是：

    <p id="try"></p>

    <script>
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;


    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 

</script>

我得到了下面的代碼，該代碼說來每秒都替換SetInterval的功能，但不足以應用：

// A basic setTimeout loop, mimicking setInterval
var doStuff = function () {
  // Do stuff
   setTimeout(doStuff, 1000);
};
setTimeout(doStuff, 1000);     

Answer 1

我會改用setInterval。 對於這樣一個簡單的腳本，您將不會有任何資源使用問題。

<p id="try"></p>

<script>
function showNotification() {
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;


    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 
}

setInterval(showNotification, 1000);

</script>

如果您不想在第一條消息之前等待1秒，只需添加showNotification（）;即可。 在setInterval之后

Answer 2

我認為應該這樣做，您只需將代碼包裝在一個函數中，這樣就可以在每個timout周期內調用它：

 <p id="try"></p>

    <script>
 function setTextNotification() {
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_minute = d.getMinutes();
    var curr_time = curr_hour + curr_minute/60;

    if (curr_time >= 0 && curr_time < 4) {
       document.getElementById("try").innerHTML = "Notification-1";

    } else if (curr_time >= 4 && curr_time < 8) {
       document.getElementById("try").innerHTML = "Notification-2";

    } else if (curr_time >= 8 && curr_time < 12) {
       document.getElementById("try").innerHTML = "Notification-3";

    } else if (curr_time >= 12 && curr_time < 16) {
       document.getElementById("try").innerHTML = "Notification-4";

    } else if (curr_time >= 16 && curr_time < 20 ) {
       document.getElementById("try").innerHTML = "Notification-5";

    } else if (curr_time >= 20 && curr_time < 23.98 ) {
       document.getElementById("try").innerHTML = "Notification-6";

    } 
}
var doStuff = function () {
  setTextNotification();
   setTimeout(doStuff, 1000);
};
setTimeout(doStuff, 1000);  

</script>