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

桃扇骨 2022-12-09 03:11 129阅读 0赞

### 定时调用： ###

<!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>

![20200921180005893.gif][]

<!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>
    		
    		<img id='img' src='img/1.jpeg'>
    		<br />
    		<br />
    		<button id='btn'>开始</button>
    		<button id='btn1'>结束</button>
    	</body>
    </html>

![20201103115920719.gif][]

# **延时调用： ** #

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

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

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

<!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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]

[20200921180005893.gif]: /images/20221123/d2c1e2ca95a843c9967dacf970518aa9.png
[20201103115920719.gif]: /images/20221123/ffd2753c6e4343ac98f04d4dfdfae3e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221123/652e351e01ff44d5ab88ee4d944bbd10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221123/23e7b8d64e8948b298de030572ef6199.png