一:间歇函数的应用场景
网页倒计时是需要每个一段时间需自动执行一段代码,而不需要手动去触发;间歇函数刚好满足了这一要求;
二:间歇函数的使用
1 开启定时器
语法规范:
1 setInterval(匿名函数,时间)
2
(1)外部书写一个具名函数
(2)setInterval(函数名,时间)
- 时间单位为ms
- 每间隔设置的时间后执行相应函数
- 不同的定时器会返回一个id数字,用于标识不同的定时器
2 关闭定时器
语法规范:
let 变量名 = setInterval(匿名函数,时间间隔)
clearInterval(变量名)
三:用户倒计时案例:
需求:一个按钮60秒后才可以使用,阅读协议按钮制作
<body>
<button disabled>我已阅读协议(5)</button>
<script>
const btn = document.querySelector('button')
let i = 5
let timer = setInterval(function () {
i--
// button按钮比较特殊,要使用innerHTML获取btton中的值
btn.innerHTML = `我已经阅读协议(${i})`
if (i === 0) {
btn.innerHTML = '我已阅读用户协议'
clearInterval(timer)
btn.disabled = false
}
}, 1000)
</script>
</body>