javascript浏览器对象之计时器

最新推荐文章于 2022-11-12 15:08:30 发布

原创最新推荐文章于 2022-11-12 15:08:30 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了JavaScript中两种常用的定时器方法：setInterval() 和 setTimeout() 的使用方式及其停止方法。通过两个示例演示了如何实现页面元素定时更新及延迟执行功能。

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

记时方法：

方法一：seInterval()间隔指定的毫秒数不停地执行指定代码

clearInterval()方法用于停止setInterval()方法执行的函数代码

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>按钮</button>
	<p></p>
	<script type="text/javascript">
		var btn = document.getElementsByTagName("button")[0];
		var myt = setInterval(function(){
			getTime();
		},1000);
		function getTime(){
			var d = new Date();
			var t = d.toLocaleTimeString();
			var p = document.getElementsByTagName("p")[0];
			p.innerHTML = t;
		};
		btn.onclick = function stop(){
			clearInterval(myt);
		}
	</script>
</body>
</html>

方法二：setTimeout()暂停指定的毫秒数后执行指定的代码

clearTimeout()方法用于停止执行setTimeout()方法的函数代码

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>按钮</button>
	<p></p>
	<script type="text/javascript">
		var btn = document.getElementsByTagName("button")[0];
		var p = document.getElementsByTagName("p")[0];
		var myt = setTimeout(function(){
			alert("弹出来");
		},2000);
		btn.onclick = function(){
			clearTimeout(myt);
		};

	</script>
</body>
</html>