javascript中的定时器

最新推荐文章于 2022-12-29 22:26:39 发布

原创最新推荐文章于 2022-12-29 22:26:39 发布 · 430 阅读

2 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了JavaScript中的两种定时器：setInterval() 和 setTimeout()。setInterval() 按照指定周期重复执行函数，而 setTimeout() 则是在指定时间后只执行一次。通过两个实例展示了这两种定时器的具体使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在javascript中有两种定时器，以下做简单介绍

1、setInterval()

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval()方法会返回一个number类型的值，用于clearInterval(timeId)清除定时器

简单案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
     <input type="button" value="停止定时器" id="btn">
	<script>
		var timeId = setInterval( function(){
			alert("过了三秒");
		},3000);

		onload = function(){ //input标签在代码前面，可以不用onload,如果input在scipt标签的后面，这里必须用onload，因为此时按钮还没有初始化，不存在id为btn的按钮
			document.getElementById("btn").onclick = function(){
			window.clearInterval(timeId);
			}
		}
	</script>
	
</body>
</html>

2、setTimeout()

setTimeout():在指定的毫秒数后调用函数或计算表达式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
</head>
<body>
    <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction()
        {
            setTimeout(function(){
                alert("Hello");
            },3000);
        }
    </script>
</body>
</html>