setTimeout setInterval 计时器

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

返回值:返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。

案例: 点击按钮开始,停止时间显示

<div onclick="startStop()" style="width:100px;height: 20px; line-height: 20px; background:red;text-align: center; color:#fff">button</div>
let timer=null
		function showtime(){
			let date=new Date()
			let year=date.getFullYear()
			let month=date.getMonth()+1
			let day=date.getDate()
			let hour=date.getHours()
			let Minutes=date.getMinutes()
			let seconds=date.getSeconds()
			let dataTime=`${year}-${month}-${day} ${hour}:${Minutes>=10 ? Minutes : '0'+Minutes}:${seconds>=10 ? seconds :'0'+seconds }`
			console.log(dataTime) // 2019-4-29 16:02:50
			    timer=window.setTimeout(showtime,10000)
		}
		
		function startStop(){
			console.log('timer',timer)
			if(timer){
				clearTimeout(timer)
				timer=null
				console.log('1')
			}else{
				console.log('2')
				showtime() 

			}

		}

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

案例: 显示当前时间

<p>显示当前时间:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时间</button>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}

参考资料
https://www.runoob.com/jsref/met-win-setinterval.html

posted @ 2019-04-29 16:42  sunny_xyj  阅读(200)  评论(0编辑  收藏  举报