javascript学习-延迟函数和间隔函数

最新推荐文章于 2024-06-16 14:03:11 发布

加油吧qaq

最新推荐文章于 2024-06-16 14:03:11 发布

阅读量439

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107550519

版权

延迟函数：

setTimeout(延迟做的函数，延迟多少毫秒)返回一个id。第三个参数往后(给延迟触发的函数传参)。此函数是在函数队列的最后执行。
取消延迟：clearTimeout(timeoutId);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//延迟到什么时间做什么事情
			//延迟函数
			//setTimeout(延迟做的函数，延迟多少毫秒)返回一个id
			//第三个参数往后(给延迟触发的函数传参),
			var fn=function(color,text){
				var body=document.body;
			    body.style.backgroundColor=color;
			    body.innerHTML=text;
			}
				
			var timeoutId=setTimeout(fn,3000,"skyblue","helloworld");
			//取消延迟函数
			//clearTimeout(timeoutId);
		</script>
	</body>
</html>

结果：
3s后页面变化：在这里插入图片描述

间隔函数

setInterval()间隔函数，返回一个id。
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//间隔函数，返回一个id
			var fn=function(){
				var time=new Date();
				document.body.innerHTML=time;
			}
			var intervalId=setInterval(fn,1000);
			//取消间隔函数clearInterval(间隔函数id),设置3s后取消
			setTimeout(function(){
				clearInterval(intervalId);
			},3000);
			
		</script>
	</body>
</html>

结果：
3秒后取消了间隔函数所以时间会停止变化
在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-延迟函数和间隔函数

延迟函数：setTimeout(延迟做的函数，延迟多少毫秒)返回一个id。第三个参数往后(给延迟触发的函数传参)。此函数是在函数队列的最后执行。取消延迟：clearTimeout(timeoutId);<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <scrip
复制链接

扫一扫