BOM——定时器

最新推荐文章于 2022-07-28 22:14:44 发布

Try Tomato

最新推荐文章于 2022-07-28 22:14:44 发布

阅读量385

点赞数 1

分类专栏： # + 浏览器 BOM 文章标签： javascript BOM 定时器

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124214284

版权

+ 浏览器 BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.创建定时器

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 = false
        button.innerHTML = '再发吧，刚才的没发到'
        timeaa = 5
    }else{
        button.innerHTML = timeaa + '秒后才可以再次输入'
        timeaa--
    }
}
getTime()
const tInter = setInterval(getTime, 1000)
})
   
</script>
</html>

Try Tomato

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM——定时器

目录一.创建定时器二.停止定时器三.创建重复调用的定时器四.案例——发送验证码一.创建定时器window.setTimeout(调用函数[,延迟毫秒数])//例子（window可以省略）setTimeout(()=> { //执行语句},2000)setTimeout方法是用来设置定时器的，该定时器在被执行之后，开始计时，达到指定时间之后执行调用函数调用：function time(){ //执行语句}setTimeout(t
复制链接

扫一扫