JavaScript---定时器setInterval

发布人：shili8 发布时间：2025-03-01 11:23 阅读次数：0

**JavaScript 中的定时器 set Interval**

在 JavaScript 中，`setInterval()` 是一个内置函数，可以让你执行某个函数或代码块在指定时间间隔后重复执行。这个功能非常有用，特别是在需要周期性刷新页面内容、执行任务或更新数据的情况下。

**语法和参数**

`setInterval()` 的基本语法如下：

javascriptsetInterval(func, delay[, param1, param2, ...]);

- `func`: 要重复执行的函数或代码块。
- `delay`:间隔时间，单位为毫秒（ms）。
- `[param1, param2, ...]`: 可选参数，可以传递给 `func` 函数。

**示例：简单计时器**

下面是一个简单的示例，使用 `setInterval()` 来显示当前时间：

javascriptfunction showTime() {
 const date = new Date();
 document.getElementById("time").innerHTML = date.toLocaleTimeString();
}

// 每秒更新一次setInterval(showTime,1000);

在这个例子中，我们定义了一个函数 `showTime()`，它获取当前时间并将其显示到 HTML 元素 `

` 中。然后，我们使用 `setInterval()` 将该函数每隔1 秒（1000 毫秒）执行一次。

**示例：循环任务**

下面是一个更复杂的示例，使用 `setInterval()` 来模拟一个循环任务：

javascriptfunction loopTask() {
 console.log("开始第", ++count, "次循环");
 // 模拟工作时间（1 秒）
 setTimeout(() => {
 console.log("完成第", count, "次循环");
 },1000);
}

let count =0;
// 每2 秒执行一次setInterval(loopTask,2000);

在这个例子中，我们定义了一个函数 `loopTask()`，它模拟一个循环任务，每次循环后都会输出当前循环次数，并使用 `setTimeout()` 模拟工作时间。然后，我们使用 `setInterval()` 将该函数每隔2 秒（2000 毫秒）执行一次。

**示例：更新数据**

下面是一个示例，使用 `setInterval()` 来更新数据：

javascriptfunction updateData() {
 const data = { name: "John", age:30 };
 document.getElementById("data").innerHTML = JSON.stringify(data);
}

// 每秒更新一次setInterval(updateData,1000);

在这个例子中，我们定义了一个函数 `updateData()`，它获取数据并将其显示到 HTML 元素 `

` 中。然后，我们使用 `setInterval()` 将该函数每隔1 秒（1000 毫秒）执行一次。

**注意事项**

- 使用 `setInterval()` 时，请确保函数或代码块不会引起死循环或内存泄漏。
- 如果需要停止定时器，可以使用 `clearInterval()` 函数来清除定时器。
- 在某些情况下，`setInterval()` 可能会因为浏览器的性能原因而导致延迟。

总之，`setInterval()` 是一个非常有用的函数，可以让你执行周期性任务或更新数据。通过理解其语法和参数，以及示例代码，你可以轻松地将其应用于你的项目中。

上一条：【uniapp学习之】uni-forms必填项校验

下一条：Centos8+Jenkins+微信小程序前端自动发布体验版

相关标签：前端 javascript 开发语言 ecmascript

其他信息

其他资源