定时调用setInterval和延时调用setTimeout的区别！

电玩女神 2023-07-03 08:09 13阅读 0赞

## 一:定时调用setInterval ##

### 定时调用setInterval可以一直调用，延时调用setTimeout只调用一次 ###

效果图：点击按钮后开始计数，每隔一秒调用一次，一直调用，可以用clearInterval清除定时调用  
![在这里插入图片描述][20200204191732724.png]

## setInterval用法示例代码 ##

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<script type="text/javascript">
    		window.onload=function(){ 
    			var start=document.getElementById("start");
    			var stop=document.getElementById("stop");
    			var h1=document.getElementById("h1");
    			var i=1;
    			var timer;
    			start.onclick=function(){ 
    			//调用定时函数，每1s调用一次
    				timer=setInterval(function(){ 
    					h1.innerHTML=i++
    				},1000)//1000毫秒=1秒
    			};
    			stop.onclick=function(){ 
    			//点击停止按钮清除定时调用
    				clearInterval(timer)
    			}
    		}
    	</script>
    </head>
    <body>
    	<button type="button" id="start">开始</button>
    	<button type="button" id="stop">停止</button>
    	<h1 id="h1">0</h1>
    </body>
    </html>

## 二:延时调用setTimeout ##

效果图：点击按钮，两秒后执行函数，弹出警告框！并且只调用一次 可以用clearTimeout清除延时调用  
![在这里插入图片描述][20200204192613808.png]

### setTimeout用法示例代码 ###

[20200204191732724.png]: https://img-blog.csdnimg.cn/20200204191732724.png
[20200204192613808.png]: https://img-blog.csdnimg.cn/20200204192613808.png