间歇函数 (setInterval)
作用: 可以每隔一段时间调用一次这个函数
语法一:
setInterval(function(){
方法
},间歇时间) // 间歇时间以毫秒为单位(1000)
语法二:
function time(){
方法
}
setInterval(time,间歇时间) // 也叫回调函数 这里的实参不需要加括号
关闭/清除间歇函数: clearlnterval() (不关闭间歇函数的话会一直执行,不会停下来哦)
一个超简单小案例(强迫用户观看三秒小窗口):
`
用户注册协议
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
我已经阅读用户协议(3)
<script>
// 获取元素
let btn = document.querySelector('.btn')
// 我们需要一个变量 来计数
let i = 3
// 开启定时器 使用间歇函数
let timer = setInterval(function () {
// 每次数字-1
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0){
// 清除定时器
clearInterval(timer)
// 打开按钮 (在此之前是把button关闭的)
btn.disabled = ""
// 更改button的文字
btn.innerHTML = `我同意该协议`
}
}, 1000)
</script>
大概效果:
然后从这样变成了这样...
代码思路就是给按钮设置一个事件,并且禁用,然后再设置三秒倒计时,这个时候给它设置一个判断 如果倒计时=0 的时候就关闭定时器 再开启按钮
接下来是延迟函数
延迟函数 setTimeout
语法: setTimeout(回调函数,延迟的毫秒数)
setTimeout 仅仅执行一次 ,所以可以理解为就是把一段函数延迟执行.
直接上个小案例:
// 五秒后自动关闭一个图片
let box = document.querySelector('.box')
let timer = setTimeout(function(){
box.style.display = 'none'
},5000)
})
我们还可以使用递归函数用延迟函数来模拟间歇函数
<body>
现在时间: <div></div>
<script>
let div = document.querySelector('div')
function fn(){
div.innerHTML = new Date().toLocaleString()
setTimeout(fn, 1000)
}
fn()
</script>
</body>`
返回的是现在的北京时间并且秒数是一直在跳动的 但是它现在的效果和setInterval一样每一秒执行一次(但是我不会弄动态图...)
总结:
两个函数对比:
-
setInterval 的特征是重复执行, 但是首次执行会延时 (如当前设置一秒延时他会等一秒后再执行就像上面的案例一样提前调用函数)
-
setTimeout 的特征是延时执行, 只执行一次, 但是setTimeout 可以结合递归函数,能模拟出setInterval的效果
