JS 每秒执行一次|极客笔记

JS 每秒执行一次

在很多前端开发中，需要定时执行一些操作，比如每隔一段时间更新一次页面内容，或者定时发送数据请求等。在 JavaScript 中，我们可以使用定时器来实现这样的功能。其中，最常用的定时器是 setInterval 和 setTimeout，它们都可以用来指定函数在未来的某个时间点执行。

在本文中，我们将重点介绍如何让 JavaScript 函数每秒执行一次，即每隔一秒执行一次。我们将以 setInterval 定时器为例进行讲解。

使用 setInterval 实现每秒执行一次

setInterval 是一个 JavaScript 函数，它可以用来重复执行一个指定的函数，直到 clearInterval 函数被调用。其语法如下：

setInterval(function, milliseconds);

其中，function 是需要周期性调用的函数，milliseconds 是执行间隔的时间，单位为毫秒。下面是一个简单示例，演示了如何使用 setInterval 函数每秒执行一次：

function sayHello() {
  console.log('Hello, world!');
}

setInterval(sayHello, 1000);

上面的代码定义了一个 sayHello 函数，它会在控制台输出 ‘Hello, world!’。然后我们使用 setInterval 函数，让这个函数每隔一秒执行一次。

实际应用场景

在实际开发中，每秒执行一次的功能经常被用到。比如，我们可以利用它来制作一个时钟应用，每秒更新一次当前时间；或者用来实现一个实时的数据展示页面，每秒从服务器获取最新数据等。

下面我们将结合一个具体的示例，来演示如何在实际应用中使用 setInterval 函数实现每秒执行一次的功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clock</title>
</head>
<body>
  <h1 id="clock"></h1>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const timeString = ` ${hours}:$ {minutes}:${seconds}`;
      document.getElementById('clock').innerText = timeString;
    }

    setInterval(updateClock, 1000);
    updateClock(); // 初始化页面加载时立即更新一次时钟
  </script>
</body>
</html>

在上面的示例中，我们创建了一个简单的时钟页面。通过 updateClock 函数获取当前的时间，并将其显示在页面上。然后使用 setInterval 函数每隔一秒执行一次 updateClock 函数，以更新时钟显示。在页面加载时，我们也调用了一次 updateClock 函数，确保页面加载时时钟已经准备好。