如何在时间间隔后重复调用函数

Question

我正在 JavaScript 制作一个数字时钟，并尝试使用 setInterval() 每 1000 毫秒刷新一次时钟，但不是每 1000 毫秒调用一次函数，而是在重新加载页面后仅调用一次函数。 1000 毫秒后调用函数的更好方法是什么？

// Getting date method
var currentTime = new Date();
// Assigning variables 
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();



// Getting html elements
var hourElement = document.getElementById("hour");
var minELement = document.getElementById("min");
var secElement = document.getElementById("sec");


function setClockTime() {
  hourElement.innerHTML = hour;
  minELement.innerHTML = min;
  secElement.innerHTML = sec;
}


setInterval(setClockTime, 1000);

body {
  background: rgb(230, 230, 230);
}

.clock {
  display: inline-block;
  background: #000;
  color: white;
  font-size: 10em;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  width: 192px;
  text-align: center;
  border-radius: 5px;
}

div {
  width: 650px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CLOCK</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>

  <div class="container">
    <p class="clock" id="hour">10</p>
    <p class="clock" id="min">20</p>
    <p class="clock" id="sec">30</p>
  </div>

  <script src="s.js"></script>
</body>

</html>

Answer 1

您正在函数外部定义全局变量，将它们包括在内，它将起作用。

function setClockTime() {

  //Getting date method
  var currentTime = new Date();
  //Assigning variables 
  var hour = currentTime.getHours();
  var min = currentTime.getMinutes();
  var sec = currentTime.getSeconds();

  //getting html elements
  var hourElement = document.getElementById("hour");
  var minELement = document.getElementById("min");
  var secElement = document.getElementById("sec");

  hourElement.innerHTML = hour;
  minELement.innerHTML = min;
  secElement.innerHTML = sec;
}


setInterval(setClockTime, 1000);

body {
  background: rgb(230, 230, 230);
}

.clock {
  display: inline-block;
  background: #000;
  color: white;
  font-size: 10em;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  width: 192px;
  text-align: center;
  border-radius: 5px;
}

div {
  width: 650px;
  margin: 0 auto;
}

<div class="container">
  <p class="clock" id="hour">00</p>
  <p class="clock" id="min">00</p>
  <p class="clock" id="sec">00</p>
</div>

Answer 2

移动要从 setInterval

调用的代码

function setClockTime(){
  // Getting date method
  var currentTime = new Date();
  // Assigning variables 
  var hour = currentTime.getHours();
  var min = currentTime.getMinutes();
  var sec = currentTime.getSeconds();
  // getting html elements
  var hourElement = document.getElementById("hour");
  var minELement = document.getElementById("min");
  var secElement = document.getElementById("sec");
  hourElement.innerHTML = hour;
  minELement.innerHTML = min;
  secElement.innerHTML = sec;
}

Answer 3

请尝试关注 JsFiddle：https://jsfiddle.net/fx0tyw0f/1/。变量没有改变，因为 "new Date()" 在初始化时只被调用。将它移到函数内部即可。

function setClockTime(){
   let currentTime = new Date();
   //Assinig variables 
   let hour = currentTime.getHours();
   let min = currentTime.getMinutes();
   let sec = currentTime.getSeconds();

   //getting html elements
   let hourElement = document.getElementById("hour");
   let minELement = document.getElementById("min");
   let secElement = document.getElementById("sec");

   hourElement.innerHTML = hour;
   minELement.innerHTML = min;
   secElement.innerHTML = sec;
}


setInterval(setClockTime,1000);

如何在时间间隔后重复调用函数

How to call function repeatedly after interval of time

javascript

html

function

timer

clock