Question

我试图做一个实时时钟，但我遇到了问题，setTimeout实际上并没有工作，因为时钟不会自动更新。我可以请你帮忙吗？

这是我写的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <p id="p"></p>
  <script>
    var currentDate = new Date();

    function startClock() {

      time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();

      document.getElementById("p").innerHTML = time;

      setTimeout(startClock, 1000);
    }

    startClock();
  </script>
</body>

</html>

＆＃13;

Answer 1

实际上，setTimeout工作正常，但是你在函数之外实例化currentDate，所以它永远不会更新。

这是因为只有在实例化日期时才会捕获时间 - 它不会自行更新。这意味着如果你只实例化一次，它将只保留实例化的时间。

试试这个：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <p id="p"></p>
  <script>
    

    function startClock() {
      var currentDate = new Date();
  
      time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();


      document.getElementById("p").innerHTML = time;

      setTimeout(startClock, 1000);
    }

    startClock();
  </script>
</body>

</html>

Answer 2

使用 setTimeout 是正确的。但这不是最佳解决方案。因为当您调用它自己时，它将成倍地消耗内存。

因此，您可以使用 setInterval 代替 setTimeout ：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <p id="p"></p>
  <script>
    

    function startClock() {
      let currentDate = new Date();
  
      time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();


      document.getElementById("p").innerHTML = time;
    }
    setInterval(startClock, 1000);
  </script>
</body>

</html>

我应该如何在这个Javascript实时时钟中使用setTimeout？

2 个答案: