JavaScript 定时器详解：setTimeout 与 setInterval 用法及示例

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>

以上就是本文的全部内容了，希望大家能够喜欢