如何使用setTimeOut在Javascript中更改指定时间块中的文本

How to change text in specified time blocks in Javascript using setTimeOut?

本文关键字：定时间 文本 何使用 setTimeOut Javascript      更新时间：2023-09-26

我制作了一个Javascript代码，它首先评估本地机器的当前时间，并根据指定的时间块显示文本/消息。例如，消息将在时间块00小时-04小时之间为"Notification-1"。因此，24小时内有6个时间块（例如，00小时到04小时，04小时到08小时……20小时到00小时）。

如果打开新浏览器，我的代码运行良好，但在刷新浏览器之前，它不会自动更改文本。

我的问题是：我需要文本/消息根据指定的时间块自动旋转，而不刷新页面。

我知道PHP，但不懂Javascript，也不知道如何使用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);

我会使用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（）；设置间隔后

我认为应该这样做，你只需将代码包装在一个函数中，这样你就可以在每个时间段调用它：

 <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>
相关文章：