JavaScript定时器深入解析与应用示例
24 浏览量
更新于2024-08-30
收藏 73KB PDF 举报
"JavaScript定时器使用方法详解"
JavaScript定时器是Web开发中非常重要的一个概念，它们允许开发者在特定的时间间隔内或者延迟一段时间后执行特定的代码块。本文将详细介绍JavaScript中的两种主要定时器：循环执行的定时器和定时执行的定时器，以及它们的使用方法和注意事项。
1. 循环执行定时器（setInterval() 和 clearInterval()）
- `setInterval()` 方法用于周期性地执行某个函数或代码块。语法为：
```javascript
var timeid = window.setInterval("functionName", delay);
```
其中，`functionName` 是要执行的函数名，`delay` 是以毫秒为单位的时间间隔。例如，每1秒打印一次"1秒打印一次"：
```javascript
setInterval("console.log('1秒打印一次')", 1000);
```
或者使用匿名函数：
```javascript
setInterval(function() {
console.log('1秒打印一次');
}, 1000);
```
- `clearInterval()` 方法用于停止由 `setInterval()` 设置的定时器。例如，如果 `timeid` 是通过 `setInterval()` 返回的ID，则可以使用：
```javascript
window.clearInterval(timeid);
```
2. 定时执行定时器（setTimeout() 和 clearTimeout()）
- `setTimeout()` 方法用于在指定的延迟后执行一次函数或代码块。语法为：
```javascript
var timeoutId = window.setTimeout("functionName", delay);
```
例如，延迟2秒后执行 `test` 函数：
```javascript
function test() {
console.log('2秒后打印一次');
}
setTimeout(test, 2000);
```
- `clearTimeout()` 方法用于取消由 `setTimeout()` 设置的定时器。同样，`timeoutId` 是 `setTimeout()` 的返回值：
```javascript
window.clearTimeout(timeoutId);
```
使用定时器的注意事项：
- 为了避免定时器累加，每次设置定时器前应先检查并清除现有的定时器。
- 保证内存中只有一个定时器在运行，避免不必要的资源消耗。
- 在页面卸载或不再需要定时器时，务必调用 `clearInterval()` 或 `clearTimeout()` 来释放资源。
示例2：秒表计时器
这是一个简单的秒表计时器的实现，使用 `setInterval()` 实现计时功能，并通过按钮控制开始、结束和重置计时：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器计时</title>
<style>
/* ...CSS样式... */
</style>
</head>
<body>
<div id="box">
<div class="btn">
<button id="btn1">开启</button>
<button id="btn2">结束</button>
<button id="btn3">清零</button>
</div>
<div class="displayTime">
<span id="timer">00:00:00</span>
</div>
</div>
<script>
var timerDisplay = document.getElementById('timer');
var startTime = null;
var intervalId = null;
function startTimer() {
if (startTime === null) {
startTime = new Date();
intervalId = setInterval(updateTimer, 1000);
}
}
function stopTimer() {
clearInterval(intervalId);
intervalId = null;
}
function resetTimer() {
stopTimer();
startTime = null;
timerDisplay.textContent = '00:00:00';
}
function updateTimer() {
var elapsedTime = new Date() - startTime;
var minutes = Math.floor((elapsedTime / 1000) / 60);
var seconds = Math.floor((elapsedTime / 1000) % 60);
var milliseconds = elapsedTime % 1000;
timerDisplay.textContent = formatTime(minutes, seconds, milliseconds);
}
function formatTime(min, sec, ms) {
return `${pad(min, 2)}:${pad(sec, 2)}:${pad(ms / 10, 2)}`;
}
function pad(num, size) {
var s = num + '';
while (s.length < size) {
s = '0' + s;
}
return s;
}
document.getElementById('btn1').addEventListener('click', startTimer);
document.getElementById('btn2').addEventListener('click', stopTimer);
document.getElementById('btn3').addEventListener('click', resetTimer);
</script>
</body>
</html>
```
这个例子展示了如何结合HTML、CSS和JavaScript创建一个简单的秒表，用户可以通过点击按钮来开始、停止和重置计时。当计时器开始时，`updateTimer` 函数会在每秒更新显示的时间。当计时器停止或重置时，会清除定时器以防止不必要的执行。
JavaScript定时器使用方法详解定时器使用方法详解
本文实例为大家分享了JavaScript定时器使用的具体代码，供大家参考，具体内容如下
定时器分类定时器分类
1、循环执行：、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】
2、定时执行（一次定时器）：、定时执行（一次定时器）：某一段程序需要在延迟多少时间后执行【setTimeout()】【clearTimeout()】
定时器使用定时器使用
使用注意：使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。
1、循环执行：一段程序能够每间隔一段时间执行一次
设置定时器：【var timeid = window.setInterval（“方法名或方法”，“延时”）;】
清除定时器【window.clearInterval(timeid);】
// window.setInterval("console.log('1秒打印一次')", 1000);
// setInterval(function() {
// console.log('1秒打印一次');
// }, 1000);
function test() {
console.log('1秒打印一次');
}
setInterval(test, 2000);
示例示例1：：秒表计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器计时</title>
<style>
#box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 20px auto;
text-align: center;
}
.btn {
width: 100%;
margin: 10px;
}
.diaplayTime {
font-weight: 600;
font-size: 20px;
margin-top: 30px;
下载后可阅读完整内容，剩余5页未读，立即下载
2020-12-10 上传
2020-12-09 上传
2021-01-19 上传
2021-01-19 上传
2020-11-22 上传
2020-10-19 上传
2020-10-19 上传
点击了解资源详情
点击了解资源详情
weixin_38666208
- 粉丝: 18
- 资源: 934
我的内容管理
展开
最新资源
- 前端协作项目：发布猜图游戏功能与待修复事项
- Spring框架REST服务开发实践指南
- ALU课设实现基础与高级运算功能
- 深入了解STK：C++音频信号处理综合工具套件
- 华中科技大学电信学院软件无线电实验资料汇总
- CGSN数据解析与集成验证工具集：Python和Shell脚本
- Java实现的远程视频会议系统开发教程
- Change-OEM: 用Java修改Windows OEM信息与Logo
- cmnd：文本到远程API的桥接平台开发
- 解决BIOS刷写错误28：PRR.exe的应用与效果
- 深度学习对抗攻击库：adversarial_robustness_toolbox 1.10.0
- Win7系统CP2102驱动下载与安装指南
- 深入理解Java中的函数式编程技巧
- GY-906 MLX90614ESF传感器模块温度采集应用资料
- Adversarial Robustness Toolbox 1.15.1 工具包安装教程
- GNU Radio的供应商中立SDR开发包：gr-sdr介绍
