HTML JavaScript – 每隔n秒执行某个操作

在本文中，我们将介绍如何使用HTML和JavaScript来实现每隔n秒钟执行某个操作的效果。这在许多网页应用程序中非常有用，例如定时刷新数据、轮播图、自动保存等。

阅读更多：HTML 教程

使用setInterval函数

JavaScript提供了一个名为setInterval的函数，可以用来定时重复执行某个操作。该函数接受两个参数：需要执行的函数和时间间隔（以毫秒为单位）。下面是一个简单的示例，每隔1秒钟在控制台输出一次”Hello World”：

<!DOCTYPE html>
<html>
<body>

<script>
function sayHello() {
    console.log("Hello World");
}

setInterval(sayHello, 1000);
</script>

</body>
</html>

在上述示例中，我们定义了一个名为sayHello的函数，它在调用时会将”Hello World”打印到浏览器的控制台。然后，我们使用setInterval函数来每隔1秒钟调用一次sayHello函数。

动态更新网页内容

除了在控制台输出内容外，我们还可以使用setInterval函数来实现动态更新网页内容的效果。例如，我们可以每隔2秒钟更改一次网页标题的内容。下面是一个示例：

<!DOCTYPE html>
<html>
<body>

<h1 id="title">Welcome</h1>

<script>
var titles = ["Hello", "Hola", "Bonjour"];
var index = 0;

function changeTitle() {
    document.getElementById("title").innerHTML = titles[index];
    index = (index + 1) % titles.length;
}

setInterval(changeTitle, 2000);
</script>

</body>
</html>

在上述示例中，我们有一个包含id为”title”的

h1>元素，初始内容为”Welcome”。然后，我们定义了一个名为changeTitle的函数，该函数会根据数组titles中的元素依次更改标题的内容。通过使用setInterval函数，我们可以每隔2秒钟调用一次changeTitle函数，从而实现动态更新网页标题的效果。

取消执行

有时候，我们可能希望在一定的条件下停止定时执行某个操作。JavaScript提供了一个名为clearInterval的函数，可以用来取消通过setInterval函数设置的定时器。下面是一个示例，每隔1秒钟在控制台输出一次”Hello World”，但当点击按钮后，停止输出：

<!DOCTYPE html>
<html>
<body>

<button id="stopButton">Stop</button>

<script>
var intervalId;

function startOutput() {
    intervalId = setInterval(function() {
        console.log("Hello World");
    }, 1000);
}

function stopOutput() {
    clearInterval(intervalId);
}

document.getElementById("stopButton").addEventListener("click", stopOutput);
</script>

</body>
</html>

在上述示例中，我们定义了两个函数：startOutput和stopOutput。在startOutput函数中，我们使用setInterval函数每隔1秒钟在控制台输出一次”Hello World”。然后，我们通过调用clearInterval函数并传递之前设置的定时器ID来停止定时执行操作。在页面中，我们有一个id为”stopButton”的按钮，通过addEventListener函数将点击事件绑定到stopOutput函数上。