JavaScript中setTimeout与setInterval的使用详解
本文深入解析JavaScript中setTimeout与setInterval两种定时器的核心机制。详细对比两者在单次执行与循环执行上的区别，阐述如何通过setTimeout模拟setInterval功能，并演示clearTimeout与clearInterval的正确清除方式，帮助开发者掌握定时器的高效使用与内存管理。
具体实现逻辑见下方代码截图，欢迎交流探讨，共同进步。如有不足之处，敬请指正，毕竟初学者仍在成长中。接下来直接通过具体实例代码进行说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wraper"></div>
<div class="wraper1">abcd123441223432 </div>
<button onclick="clearIt=window.clearInterval(clearIt)">
Stop</button>
<script>
window.onload = function () {
$('.wraper').html('12343242342')
setTimeout(function () {
$('.wraper').hide();
setTimeout(function () {
$('.wraper1')[0].style.backgroundColor = 'red';
console.log(new Date(),"in");
},20000);
console.log(new Date(),"out");
},10000);
}
var clearIt=self.setInterval("setIntervalTest()",1000);
function setIntervalTest () {
console.log('++++');
}
</script>
<script type="text/javascript" src="jquery/jquery-min.js"></script>
</body>
</html> 
setTimeout与setInterval的相同点
补充内容：下面将详细分析setTimeout和setInterval的相同点及不同点。
setTimeout和setInterval的相同点
setTimeout和setInterval均为window对象的定时方法，语法结构基本一致。两者均接收两个参数：第一个是待执行的代码字符串，第二个是以毫秒为单位的时间间隔。当指定的时间间隔到达后，系统将执行对应的代码。
setTimeout与setInterval的区别
setTimeout和setInterval的区别
setTimeout方法用于定义定时程序，即指定在多久之后执行某项操作。该操作执行完毕后即结束，不会重复执行。
setInterval方法则表示每隔固定的时间间隔反复执行某项操作，直到被手动清除。
若需使用setTimeout实现setInterval的功能，必须在执行的代码内部再次调用setTimeout来定时调用自身，从而形成循环调用的效果。
定时器的清除方法
若要清除定时器，需根据创建定时器时使用的具体方法，调用对应的清除函数：
例如：
timer=setTimeout('startShow()',2000);
clearTimeout(timer);或者：
timer=setInterval('startShow()',2000);
clearInterval(timer);以上介绍了JavaScript中setTimeout与setInterval的基本使用方法，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。同时也感谢大家对本站的支持！
JS合并多个数组的三种方法：concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36