定时器

setTimeout( )定时器

语法规范：window.setTimeout(调用函数,[延迟的毫秒数])

①window在调用的时候可以省略
setTimeout( )方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

setTimeout(function(){
	console.log('时间到了')
},2000)

②这个延迟时间单位是毫秒 但是可以省略，如果省略默认的是0

③这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’【不太建议】

//直接写函数
setTimeout(function(){
	console.log('时间到了')
},2000)

//写函数名
function callback(){
	console.log('爆炸了')
}
setTimeout(callback,3000)
//setTimeout('callback()',3000) 不提倡

④页面中可能有很多的定时器，我们经常给定时器加标识符(名字)

var timer1 = setTimeout(callback,3000)
var timer2 = setTimeout(callback,5000)

setTimeout( )这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
element.onclick = function(){} 或者 element.addEventListener(“click”,fn){};里面的函数也是回调函数。

案例：5秒后自动关闭的广告
案例分析：
①核心思路：5秒之后，就把这个广告隐藏起来
②用定时器setTimeout

<img src = "images/ad.jpg" alt="" class="ad">

var ad = document.querySelector('.ad')
setTimeout(function(){
	ad.style.display = 'none'
},5000)

停止setTimeout()定时器
语法规范：window.clearTimeout(timeoutID）

<button>点击停止定时器</button>

var btn = document.querySelector('button')
var timer = setTimeout(function(){
	console.log('爆炸了')
},5000)
btn.addEventListener('click',function(){
	clearTimeout(timer)
})

setInterval( )定时器

语法规范：window.setTimeout(调用函数,[间隔的毫秒数])
setInterval( )方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

①window在调用的时候可以省略
setInterval( )方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
②这个间隔时间单位是毫秒 但是可以省略，如果省略默认的是0 表示每隔多少毫秒就自动调用这个函数
③这个调用函数可以直接写函数 还可以写函数名 还有一个写法 ‘函数名()’【不太建议】

setInterval(function(){
	console.log('继续输出')
},1000)

//setTimeout 延迟时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
//setInterval 每隔这个延迟时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

案例：倒计时
案例分析：
①这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
②三个黑色盒子里面分别存放时分秒
③三个黑色盒子利用innerHTML放入计算的小时分钟秒数
④第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
⑤最好采用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白

<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>

//1.获取元素
var hour = document.querySelector('.hour')	//小时的黑色盒子
document.querySelector('.minute') //分钟的黑色盒子
document.querySelector('.second') //秒数的黑色盒子
var inputTime = new Date('2021-1-20 23:14:00')
countDown()	//我们先调用一次这个函数，防止第一次刷新页面有空白
//2.开启定时器
setInterval(countDown,1000)
function countDown(){
	var nowTime = new Date()
	var times = (inputTime - nowTime) / 1000
	var h = parseInt(times / 60 / 60 %24)	//时
	h = h < 10 ? '0' + h : h
	hour.innerHTML = h	//把剩余的小时 给 小时的黑色盒子
	var m = parseInt(times / 60 %60)	//分
	m = m < 10 ? '0' + m : m
	minute.innerHTML = m	//把剩余的分钟 给 分钟的黑色盒子
	var s = parseInt(times % 60)	//秒
	s = s < 10 ? '0' + s : s
	second.innerHTML =s	//把剩余的秒数 给 秒数的黑色盒子
}

停止setInterval()定时器
语法规范：window.clearInterval(IntervalID）
clearInterval()方法取消了先前通过调用setInterval()建立的定时器。
//window可以省略
//里面的参数就是定时器的标识符

<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>

var begin = document.querySelector('.begin')
var stop = document.querySelector('.stop')
var timer = null;	//全局变量 null是一个空对象
begin.addEventListener('click',function(){
	timer = setInterval(function(){
		console.log('你好吗？')
	},1000)
})
stop.addEventListener('click',function(){
	clearInterval(timer)
})

案例：发送短信
①按钮点击之后，会禁用disabled为true
②同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
③里面秒数是有变化的，因此需要用到定时器
④定义一个变量，在定时器里面，不断递增
⑤如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态

手机号码：<input type="number"><button>发送</button>

var btn = document.querySelector('button')
var time = 10	//定义剩下秒数
btn.addEventListener('click',function(){
	btn.disabled = true
	var timer = setInterval(function(){
		if(time == 0){
		//清除定时器和复原按钮
		clearInterval(timer)
		btn.disabled = false
		btn.innerHTML = '发送'
		time = 10	//这个10需要重新开始
		}else{
			btn.innerHTML = '还剩下'+time+'秒'
			time--
		}
	},1000)
})