BOM1：定时器

全糖去冰_q

已于 2024-07-12 15:21:34 修改

阅读量144

点赞数 3

分类专栏：前端学习文章标签： javascript 前端

于 2024-07-12 15:20:24 首次发布

本文链接：https://blog.csdn.net/QJBMFCH/article/details/140380019

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定时器

定时炸弹：setTimeout()
周期性定时器:闹钟setInterval()

<!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>
  </head>
  <body>
    <script>
      //定时器: 1.定时炸弹 2. 闹钟

      // 一次性定时器(时间的单位: 毫秒)--定时炸弹setTimeout()
      window.setTimeout(function () {
        // 异步代码
        // 在这里,this 指向谁
        console.log(this) // 指向window
        console.log('1s钟到了,BOOM...')
      }, 1000)

      // 同步代码
      console.log('我被执行了')

      // 周期性定时器:闹钟setInterval()
      window.setInterval(function () {
        console.log('1s钟到了,BOOM...')
      }, 1000)
    </script>
  </body>
</html>

clearTimeout()方法
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)

列子如下

<!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>
  </head>
  <body>
    <script>
      var counter = 3
      // setInterval 返回 定时器的唯一id
      setInterval(function () {
        if (counter <= 0) {
          // 清除定时器
          clearInterval(id)
        }
        console.log(`还剩${counter}秒`)
        counter--
      }, 1000)
    </script>
  </body>
</html>