前端---js（自学笔记28)（定时调用）以及定时练习图片自动切换、延时调用

最新推荐文章于 2024-04-20 05:56:51 发布

ABU_MOlI_ITUI

最新推荐文章于 2024-04-20 05:56:51 发布

阅读量498

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/108715572

版权

javaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

定时调用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取count
				var count = document.getElementById("count");
				
				//使count中的内容，自动切换
				/*
				 * JS的程序的执行速度是非常非常快的
				 * 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					
					alert("hello");
				}*/
				
				/*
				 * setInterval()
				 * 	- 定时调用
				 * 	- 可以将一个函数，每隔一段时间执行一次
				 * 	- 参数：
				 * 		1.回调函数，该函数会每隔一段时间被调用一次
				 * 		2.每次调用间隔的时间，单位是毫秒
				 * 
				 * 	- 返回值：
				 * 		返回一个Number类型的数据
				 * 		这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				
				var timer = setInterval(function(){
					
					count.innerHTML = num++;
					
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				//clearInterval()可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
				//clearInterval(timer);
				
			};
			
			
		</script>
	</head>
	<body>
		<h1 id="count"></h1>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload =function(){
				/**
				 * 目标：图片自动切换
				 * **/
				//获取图片
				var img = document.getElementById('img');
				//获取图片地址
				//为了使得图片地址可以更改，需要写一个数组
				var imgArr =['img/1.jpeg','img/2.jpeg','img/3.jpeg','img/4.png','img/5.jpeg','img/6.jpeg','img/7.jpeg','img/8.jpeg','img/9.jpeg',]
				//但是这样的话imgArr[3]是写死的
				//img.src=imgArr[3]	
				//创建一个index保存索引
				var index = 0;
				//
				var timer;
				//获取按钮事件
				var btn =document.getElementById('btn');
				btn.onclick = function(){
					/**
					 * 目前，我们每点击一次按钮，就会开启一个定时器
					 * 点击多次就会开启多个定时器，这就导致图片的切换速度过快
					 * 并且我们只能关闭最后一次开启的定时器
					 * 在开启之前，就需要当前元素的其他定时器关闭
					 * 
					 * **/
					clearInterval(timer)
					//开启定时器--自动切换图片
				timer = setInterval(function(){
					index++;
					//但是这里有个问题是当index++大于了索引数，将不会出现图片，所以这里需要修改使得图片链接起来
					//办法一：
//					if(index >= imgArr.length){
//						index = 0
//					}
//办法二：
					index %= imgArr.length;
					
					img.src=imgArr[index];
				},1000)
				}
				var btn1 =document.getElementById('btn1');
				btn1.onclick =function(){
					/**
					 * clearInterval（）可以接受任意参数
					 * 如果参数是一个有效的定时器标识，则停止对应的定时器
					 * 如果参数不是一个有效的标识，则什么也不做
					 * **/
					clearInterval(timer)
				}
				
				
				
			}
		</script>
	</head>
	<body>
		<!--1、图片按钮导入-->
		<img id='img' src='img/1.jpeg'>
		<br />
		<br />
		<button id='btn'>开始</button>
		<button id='btn1'>结束</button>
	</body>
</html>

延时调用：

延时调用：延时调用一个函数不马上执行，而是隔一段时间执行，而且只执行一次。

延时调用和定时调用的区别：定时调用，会执行多次，延时调用只执行一次

但是延时调用和定时调用可以互相调用，（延时调用多次就可以实现定时调用，定时调用执行一次就可以实行延时调用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>延时调用</title>
		<script type="text/javascript">
			
			window.onload = function(){
				var timer = 1;
				// setInterval(function(){
				//	console.log(timer++)
				//	}, 3000)
				
				var interval = setTimeout(function(){
					console.log(timer++)
				},3000)
				clearTimeout(interval);
			}
		</script>
	</head>
	<body>
	</body>
</html>