JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval

Yvonne爱编码

已于 2025-05-28 11:07:00 修改

阅读量1k

点赞数 36

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 开发语言 ecmascript java 前端 css

于 2025-05-27 08:27:52 首次发布

本文链接：https://blog.csdn.net/HRDMN/article/details/148243948

前端专栏收录该内容

39 篇文章

订阅专栏

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

JavaScript- 1.1 行内、内部、外部三种引用方式

JavaScript- 1.2 ECMA基本语法和控制流

JavaScript- 1.3 DOM对页面内容进行操作

JavaScript- 1.4 BOM对浏览器进行操作

JavaScript- 1.5 数据类型+变量+运算符

JavaScript- 1.6 基本控制流

JavaScript- 2.1 系统函数和自定义函数

JavaScript- 2.2 内置对象MATH

JavaScript- 2.3 内置对象String

JavaScript- 2.4 内置对象Date

JavaScript- 2.5 内置对象ARRAY

JavaScript- 2.6 数组应用

JavaScript- 2.7 二维数组

JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval

JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面

JavaScript- 4.1 DOM-document对象

JavaScript- 4.2 DOM--定位元素

JavaScript- 4.3 轮播图实现指南

系列文章目录

前言

一、定时器函数：setTimeout 和 setInterval

2、window-settinterval

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、定时器函数：setTimeout 和 setInterval

window.setTimeout 和 window.setInterval 是 JavaScript 中两个常用的定时器函数，它们都允许你在特定时间后执行代码，但有不同的用途和行为。

1、setTimeout

setTimeout 用于在指定的延迟时间后执行一次函数或代码片段。

基本语法

javascript

const timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);

特点

只执行一次指定的函数
返回一个定时器 ID，可用于取消执行 (clearTimeout)
延迟时间是从调用时刻开始计算的

示例

javascript

// 1秒后执行一次
setTimeout(() => {
  console.log('这段代码将在1秒后执行');
}, 1000);

// 使用参数
function greet(name) {
  console.log(`Hello, ${name}!`);
}
setTimeout(greet, 2000, 'Alice'); // 2秒后输出: "Hello, Alice!"

// 取消执行
const timeoutId = setTimeout(() => {
  console.log('这段代码不会执行');
}, 3000);
clearTimeout(timeoutId);

2、setInterval

setInterval 用于重复执行指定的函数，每次执行之间有固定的时间间隔。

基本语法

javascript

const intervalID = setInterval(function[, delay, arg1, arg2, ...]);

特点

重复执行指定的函数，直到被取消
返回一个定时器 ID，可用于取消执行 (clearInterval)
间隔时间是从上一次函数执行完成开始计算的

示例

javascript

// 每1秒执行一次
let counter = 0;
const intervalId = setInterval(() => {
  console.log(`计数: ${++counter}`);
  if (counter >= 5) {
    clearInterval(intervalId); // 执行5次后停止
  }
}, 1000);

// 使用参数
function logMessage(message, times) {
  console.log(`${message} (已执行 ${times} 次)`);
}
let execCount = 0;
const interval = setInterval(logMessage, 1500, '重复消息', ++execCount);

// 取消间隔
setTimeout(() => {
  clearInterval(interval);
}, 5000); // 5秒后停止重复执行

3、主要区别

特性	setTimeout	setInterval
执行次数	一次	重复执行，直到取消
适用场景	延迟执行一次性任务	定期执行任务（如轮询、动画等）
取消方法	clearTimeout	clearInterval
时间计算	从调用时刻开始计算	从上一次执行完成开始计算

4、注意事项

定时器不是精确的：由于 JavaScript 的单线程特性，定时器的实际执行时间可能会比指定的延迟时间稍长。
最小延迟时间：现代浏览器中，定时器的最小延迟时间通常为 4ms（即使设置为 0），这是为了防止代码长时间阻塞主线程。
内存泄漏：忘记取消不再需要的定时器可能导致内存泄漏。
替代方案：对于动画需求，requestAnimationFrame 通常是更好的选择；对于复杂的异步流程，可以考虑使用 async/await 配合 Promise。
Node.js 环境：在 Node.js 中，这些函数也是可用的，但不是 window 对象的方法，而是全局可用的。

理解这两个定时器函数的工作原理对于编写高效的 JavaScript 代码非常重要，特别是在处理异步操作和定时任务时。

二、代码实践

1、window-settimeout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window-settimeout</title>
	</head>
	<body onload="myClock()">
		<!-- 页面上有一个显示元素 -->
		<!-- 每秒钟获得一次时间并把他打印出来到对应的显示元素上 -->
		<label id='lbl'></label>
		<button type="button" onclick="myStop()">停止</button>
		<script type="text/javascript">
			//只能执行一次 如何循环 利用自调用
			var timeid;
			var mylbl=document.getElementById('lbl');
			function myClock(){
				var myDate=new Date();
				mylbl.innerText=myDate.toLocaleString();
				timeid=window.setTimeout("myClock()",1000);
			}
			function myStop(){
				clearTimeout(timeid);//停止时钟
			}
		</script>
	</body>
</html>

代码运行如下：

2、window-settinterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window-settinterval</title>
	</head>
	<body onload="myClock()">
		<label id="lbl"></label>
		<button type="button" onclick="myStop()">停止</button>
		<script type="text/javascript">
			//sentinterval 每time毫秒执行一次，循环
			var timeid;
			var mylbl=document.getElementById('lbl');
			function myClock(){
				timeid=window.setInterval(function(){
					var myDate=new Date();
					mylbl.innerText=myDate.toLocaleString();
				},1000);
			}
			function myStop(){
				clearInterval(timeid);
			}
		</script>
	</body>
</html>

代码运行如下：