JS定时器每隔5秒执行一次|极客教程

JS定时器每隔5秒执行一次

在前端开发中，经常会遇到需要定时执行某些操作的情况，这时就可以使用定时器来实现。定时器可以让我们在设定的时间间隔内重复执行特定的代码，从而实现周期性的操作。在本文中，我们将重点讨论如何使用JavaScript中的定时器实现每隔5秒执行一次的效果。

setInterval函数

在JavaScript中，我们通常使用setInterval函数来设置定时器。setInterval函数接受两个参数：第一个参数是要执行的函数或代码块，第二个参数是时间间隔，单位是毫秒。通过调用setInterval函数，我们可以每隔一定的时间间隔执行一次指定的代码。

下面是一个简单的使用setInterval函数的示例，每隔1秒输出一次”Hello, world!”到控制台：

setInterval(() => {
    console.log("Hello, world!");
}, 1000);

在上面的示例中，我们传入了一个箭头函数作为第一个参数，这个箭头函数每隔1秒就会被执行一次，从而在控制台上输出”Hello, world!”。第二个参数1000表示时间间隔为1秒。

实现每隔5秒执行一次的定时器

要实现每隔5秒执行一次的效果，我们只需要将setInterval函数的第二个参数设置为5000，即5000毫秒等于5秒。下面是一个示例代码：

setInterval(() => {
    console.log("Executed every 5 seconds");
}, 5000);

运行上面的代码后，控制台将每隔5秒输出”Executed every 5 seconds”，从而实现了每隔5秒执行一次指定的代码的效果。

完整示例

为了更好地演示每隔5秒执行一次的效果，我们可以结合HTML和CSS来制作一个简单的定时器展示页面。下面是一个完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Timer Demo</h1>
    <p id="timer">0</p>
    <script>
        let seconds = 0;
        const timerElement = document.getElementById("timer");

        setInterval(() => {
            seconds += 5;
            timerElement.textContent = seconds;
        }, 5000);
    </script>
</body>
</html>