JS中BOM 浏览器对象提供的定时器

news2024/9/21 11:11:39

window对象提供了2个定时器方法：
settTimeout()和setInterval()

1.setTimeout()定时器
语法：

window.setTimeout(调用函数,[延迟的毫秒数]);

延迟时间可以省略，省略则为0

用于设置一个定时器，该定时器再定时器到期后执行调用函数

写法一：

    <script>
      setTimeout(
        function () {
          console.log("时间到了");
        },
        [2000]
      ); //window可以省略
    </script>

写法二：

    <script>
      function callback() {
        console.log("bomb");
      }
      setTimeout("callback()", 3000);
    </script>

繁琐，不提倡

页面中可能有很多的定时器，我们经常给定时器家标识符（取名字）

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>
  </head>
  <body>
    <img src="./imgs/1.jpg" alt="" class="ad" />
    <script>
      var ad = document.querySelector(".ad");
      setTimeout(function () {
        ad.style.display = "none";
      }, 3000);
    </script>
  </body>
</html>

打开后页面显示出大大的海绵宝宝，3秒后消失

在这里插入图片描述

停止setTimeout()定时器

语法：

window.clearTimeout(timeoutID)

clearTimeout方法取消之前通过调用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>
  </head>
  <body>
    <button>点击停止定时器</button>
    <script>
      alert("爆炸计时ing");
      var btn = document.querySelector("button");
      var timer = setTimeout(function () {
        //给定时器取名方便调用
        alert("爆炸了");
      }, 1000);
      btn.addEventListener("click", function () {
        clearTimeout(timer);
        alert("小子，你成功阻止了爆炸，明天来毛利侦探事务所上班吧");
      });
    </script>
  </body>
</html>