「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战」 。
在JavaScript中有两个定时器,一个只执行一次,用完即销毁,一个是每隔那个时间段,就执行一次
- 第一个定时器: setTimeout() :在指定的毫秒数后调用函数或计算表达式。
语法:setTimeout(code,millisec,lang)
setTimeout(function() {
要执行的函数体
}, 时间);
(1)这个定时器只可以用一次,我给它起了个很记的名字,叫日抛定时器,用完即扔
(2)定时器里面的时间是毫秒数。里面可以填的最快速度是20ms,如果不填,则默认20ms.但如果写了比20ms小的时间,则,不会执行这个时间的,它还是以20ms来处理这个定时器。 时间没有单位哦
清除定时器:
clearTimeout(定时器的名字)
- 第二个定时器:setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
语法: setInterval(code,millisec,lang)
let time2 = setInterval(function() {
要执行的函数体
}, 时间);
(1)这个定时器是每隔那个时间段,就调用一次里面函数 (2)里面的时间和第一个函数体一样,里面填的是毫秒数最快速度只有20ms,时间没有单位
适用场景:倒计时,轮播图等,需要每隔一段时间就变化的场景
清除定时器: clearInterval(定时器的名字) 给大家一个例子方便直到如何使用:
<script>
// 一次定时器
document.querySelector('.start').onclick = function() {
let time = setTimeout(function() {
alert('爆炸啦')
}, 3000);
}
document.querySelector('.end').onclick = function() {
clearTimeout(time)
}
// 循环调用的定时器
let time2 = setInterval(function() {
document.querySelector('p').innerText++
}, 1000);
// 当结束的按钮被点击的时候
document.querySelector('.end').onclick = function() {
// 清除定时器time2
clearInterval(time2)
}
</script>