本文详细介绍 JavaScript 中的两种定时器：setTimeout 用于单次延迟执行，setInterval 用于周期性重复执行。通过具体 HTML 与 JavaScript 代码示例，演示如何创建、启动以及使用 clearInterval 停止定时器，帮助开发者掌握前端时间控制的核心方法。
JavaScript 定时器概述
定时器1
定时器的主要作用是指定在一段特定的时间后执行某段程序。
setTimeout 单次定时器
第一种定时器是 setTimeout()。
其语法格式为：[定时器对象名=] setTimeout("<表达式>"，毫秒)。
该函数的功能是执行 <表达式> 一次。
以下是一个简单的使用示例。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>timer1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function count()
{
setTimeout("alert('执行成功！')",7000);
}
</script>
</head>
<body>
<input type="button" value="点击我啊" onclick="count();">
</body>
</html>setInterval 重复定时器与 clearInterval 停止方法
第二种定时器是 setInterval()。
它以一定的时间为间隔，不断地重复执行表达式。
对应的函数是 setInterval()。
其语法格式为：[定时器对象名=] setInterval("<表达式>"，毫秒)。
该函数的功能是重复执行 <表达式>，直至窗口、框架被关闭或执行 clearInterval。
若要停止定时器，可以使用 clearInterval()。
其语法格式为：clearInterval(定时器对象名)。
该函数的功能是终止定时器。
以下是一个包含停止功能的示例。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>timer2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var sec = 0;
var timer = setInterval("count();",1000);//页面加载的时候即开始计时
function count()
{
document.getElementById("num").innerHTML = sec++;
}
function stopCount()
{
clearInterval(timer);//停止定时器的运行
}
</script>
</head>
<body>
<font color="red" id="num">0</font>
<input type="button" value="停止" onclick="stopCount();">
</body>
</html>以上就是本文的全部内容了，希望大家能够喜欢