JavaScript定时器深入解析与应用示例
127 浏览量
更新于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页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2021-01-19 上传
2021-01-19 上传
2020-10-23 上传
2020-10-19 上传
2020-12-10 上传
点击了解资源详情
weixin_38666208
- 粉丝: 18
- 资源: 932
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
