js使用间隔函数（定时器、监听）

*Major*

已于 2023-07-29 11:58:35 修改

阅读量173

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-29 11:38:27 首次发布

本文链接：https://blog.csdn.net/qq_41375318/article/details/131993002

版权

文章展示了如何使用JavaScript的setInterval和clearInterval函数创建和清除定时器。第一个示例简单地每隔500毫秒打印消息。第二个示例创建了两个定时器并关闭其中一个。最后一个例子演示了一个计数器，当计数到0时，禁用的按钮变为可点击，并更改其文本。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
 //setInterval(函数，间隔时间)

  setInterval(function(){ console.log("HI Major")},500)
</script>
</body>
</html>

在这里插入图片描述

 //setInterval(函数，间隔时间)
 function test(){ console.log("HI Major")}
 
 setInterval(test,500)

关闭定时器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
 //setInterval(函数，间隔时间)
 function test(){ console.log("HI Major")}

 let x1 =  setInterval(test,500) // 返回定时器的id号
 console.log(x1)
 let x2 =  setInterval(test,600) // 返回定时器的id号
 console.log(x2)
 // 关闭定时器
 clearInterval(x2)

</script>
</body>
</html>

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


<button class="btn" disabled>待点击(5)</button>

<script>
 const btn = document.querySelector('.btn')
 let i =5

 let interId = setInterval(() => {
  i--
  btn.innerHTML= `待点击 (${i})`
  if(i == 0){
    btn.disabl
    clearInterval(interId)

    btn.disabled = false
    btn.innerHTML = "可点击"
  }
 }, 1000);

</script>
</body>
</html>