setInterval()与setTimeout()

setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式

setTimeout():在指定的毫秒数后调用函数或计算表达式,只调用一次

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>	
		let i=0;
		function t(){
			console.log(i++);
		}	
		setInterval("t()",5000);//5秒后执行t()方法，之后每隔5秒执行一次；
		setTimeout("t()",5000);//5秒后执行方法t()一次就结束
		</script>
	</head>
	<body>
	</body>
</html>

clearInterval()：由setInterval()返回值作为的ID,可清除setInterval()设置的timeout

例子：

<html>
	<head>
		<meta charset="UTF-8">
		<title>clearInterval方法</title>
		<script type="text/javascript">
			var i=0;
			function showIndex(){
				document.getElementById("current_data").innerHTML=i;
				i++;
			}
        </script>
   </head>
    <body>
        <div id="current_data">110</div>
        <script type="text/javascript">
        	var id = window.setInterval("showIndex()", 1000);
        	function stopTime(){
				window.clearInterval(id);
			}
        </script>
		<input type="button" value="停止" onclick="stopTime()">
	</body>
</html>

clearTimeout取消由 setTimeout() 方法设置的 timeout

例子：

<html>
	<head>
		<meta charset="UTF-8">
		<title>clearTimeout方法</title>
		<script type="text/javascript">
			var i = 0;
			var id;
			function startCount(){
				document.getElementById("current_data").innerHTML=i;
				i++;
				id = window.setTimeout("startCount()", 3000);
			}
			
			function stopCount(){
				window.clearTimeout(id);
			}
        </script>
   </head>
    <body>
        <div id="current_data">36</div>
        <script>
			startCount();
        </script>
        <br>
        <input type="button" value="停止" onclick="stopCount()">
	</body>
</html>

setInterval()与setTimeout()

猜你喜欢