JavaScript中的计时器SetInterval和Settimeout讲解

矫情吗；* 2022-02-15 03:17 197阅读 0赞

**1.SetInterval**  
定义： ；循环定时器：固定时间间隔指定一次，像闹钟 一样，不关闭继续执行。  
语法结构：setInterval(code,millisec,lang)  
参数code: 必需。要调用的函数或要执行的代码串。  
参数millisec：必须。周期性执行或调用 code 之间的时间 间隔，以毫秒计。  
参数lang：可选。 JScript | VBScript | JavaScript

案列：获取系统当前时间

<script>
    			//setInterval(code,millisec,lang)   参数code 要调用的函数或执行的代码      millisec周期执行的时间间隔，毫秒计算
    		
    			//循环计时器，每隔一秒就输出一次hellow
    			/*setInterval(function(){
    				alert('hellow')
    			},1000);*/ 
    			var mysetInterval;
    			//开始计时器
    			function startInterval(){
    				mysetInterval=setInterval('myFunction()',1000);
    			}
    			
    			//获取当前时间的函数
    			function myFunction(){
    				var datetime=new Date();
    				hours=datetime.getHours();
    				minutes=datetime.getMinutes();
    				seconds=datetime.getSeconds();
    				document.getElementById('h2_01').innerHTML='当前时间为：'+hours+':'+minutes+':'+seconds;
    			}
    			//暂停计时器
    			function stopInterval(){
    				clearInterval(mysetInterval);
    			}
    			
    		</script>
    	</head>
    	<body>
    		<h2 id="h2_01">使用setInterval()循环计时器，实现时间停止和开始</h2>
    		<input type="button"  onclick="startInterval();" value="开始"/>
    		<input type="button" onclick="stopInterval();" value="暂停" />
    	</body>

**2.Settimeout**  
实现一个简易的闹钟

<script>
    			window.onload=function(){
    				//setTimeOut 只会计时一次
    				//setTimeout('alert("hellow world")',3000);
    				function startTimeOut(){
    					var datetime=new Date();
    					hours=datetime.getHours();
    					minutes=datetime.getMinutes();
    					seconds=datetime.getSeconds();
    					m=check(minutes);
    					s=check(seconds);
    					
    					document.getElementById('continer').innerHTML='当前的时间:'+hours+':'+m+':'+s;
    					setTimeout('startTimeOut()',1000);
    				}
    				function check(i){
    					if(i<10){
    						i='0'+i;
    					}
    					return i;
    				}
    				startTimeOut();
    			}
    		</script>
    	</head>
    	<body>
    		<div id="continer"></div>
    	</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 setInterval和setTimeout

setInterval(func, 1000) 在1000毫秒后，每隔1000毫秒执行1次 setInterval(func(), 1000) 在1000毫秒后执行1次

╰+哭是因爲堅強的太久メ/ 2022年09月25日 04:15/ 0 赞/ 175 阅读

相关 JavaScript的计时器的工作原理（setTimeout/setInterval）

原文链接： [http://segmentfault.com/a/1190000002633108][http_segmentfault.com_a_11900000026

ゝ一世哀愁。/ 2022年08月22日 01:29/ 0 赞/ 145 阅读

相关计时器——setTimeout、setInterval相关的精悍代码

setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。如下展示的应用函数会在等待的指定的时间之后，开始重复调用某个函数，然后

爱被打了一巴掌/ 2022年06月15日 08:36/ 0 赞/ 147 阅读

相关 JavaScript中SetInterval与setTimeout的用法详解

在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()，但是大家对SetInterval与setTimeout的用

以你之姓@/ 2022年06月13日 06:30/ 0 赞/ 236 阅读

相关 JavaScript 计时事件[setInterval(),setTimeout()]

JavaScript 计时事件通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

秒速五厘米/ 2022年06月08日 02:56/ 0 赞/ 188 阅读

相关 javascript setInterval和setTimeout的this问题

The "`this`" problem 如果你通过setTimeout函数（或其他函数，或其他情况），调用的时候this的值可能并不能像你期待的那样。这种情况已经在[Jav

野性酷女/ 2022年06月04日 05:07/ 0 赞/ 164 阅读

相关 setInterval和setTimeout

在项目的支付模块中，最后选用的是支付宝二维码支付方式，增添的一个算是比较有技术含量的东西，就是采用轮询的方式，监听订单状态，对二维码进行刷新。代码如下： ![这里写图

叁歲伎倆/ 2022年05月21日 07:48/ 0 赞/ 287 阅读

相关 JavaScript中的setInterval()和setTimeout()

1.setlnterval() setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到

水深无声/ 2022年04月05日 03:50/ 0 赞/ 187 阅读

相关用JS写的计时器setTimeout与setInterval

setTimeout与setInterval的区别：setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指

迈不过友情╰/ 2022年03月12日 12:43/ 0 赞/ 226 阅读

相关 JavaScript中的计时器SetInterval和Settimeout讲解

1.SetInterval 定义：；循环定时器：固定时间间隔指定一次，像闹钟一样，不关闭继续执行。语法结构：setInterval(code,millisec,l

矫情吗；*/ 2022年02月15日 03:17/ 0 赞/ 198 阅读