目录
一.创建定时器
二.停止定时器
三.创建重复调用的定时器
四.案例——发送验证码
一.创建定时器
window.setTimeout(调用函数[,延迟毫秒数])//例子（window可以省略）
setTimeout(()=> {//执行语句
},2000)setTimeout方法是用来设置定时器的，该定时器在被执行之后，开始计时，达到指定时间之后执行调用函数
调用：
function time(){//执行语句
}setTimeout(time,3000)二.停止定时器
window.clearTimeout(定时器名字)例如我们想要停掉这个定时器：
<script>
document.addEventListener('DOMContentLoaded',()=> {const a = document.querySelector('a')a.addEventListener('click',()=> {const time = setTimeout(()=> {console.log('你好-定时器')
},5000)const btn = document.querySelector('button')btn.addEventListener('click',()=> {clearTimeout(time)})})
})
</script>
<body><a href="javascript:;">点击开启</a><button>点击关闭</button>
</body>三.创建重复调用的定时器
window.setInterval(回调函数[,间隔毫秒数])和我们一开始所说的setTimeout方法一样，可以创建一个定时器
之所以存在，那么setIntterval有它的独特之处：
setInterval()方法重复调用一个函数，意思是每隔指定的时间，它就会重复调用一次回调函数
而setTimeout()方法调用一次之后结束
四.案例——发送验证码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input{width: 20vw;}</style>
</head>
<body><input type="text" name="" id="" placeholder="请输入您的电话号，别的我不想多说了"><button type="submit">发送验证码</button>
</body>
<script>const button = document.querySelector('button')
let timeaa = 5
button.addEventListener('click',function(){
button.disabled = true
function getTime(){if(timeaa == 0){clearTimeout(tInter)button.disabled = falsebutton.innerHTML = '再发吧，刚才的没发到'timeaa = 5}else{button.innerHTML = timeaa + '秒后才可以再次输入'timeaa--}
}
getTime()
const tInter = setInterval(getTime, 1000)
})</script>
</html>
