BOM

3 定时器

eg：在这里插入图片描述

此处轮播图有两张，它每隔一段时间就会播放下一个图片，这些跟时间打交道的效果，我们便可以使用定时器。

3.1 两种定时器

window对象给我们提供了2个非常好用的方法定时器。

setTimeout()
setInterval()

3.2 setTimeout() 定时器

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

setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。

$\color{red}{注意:}$

window可以省略。
这个调用函数可以 $\color{red}{直接写函数 , 或者写函数名}$ 或者采取字符串‘ $\color{DodgerBlue}{函数名()}$ '三种形式。第三种不推荐
延迟的毫秒数省略默认是0 ,如果写 , 必须是毫秒。
因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

eg. 08-定时器之setTimeout.html

<!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. setTimeout
    // 语法规范: window . setTimeout(调用函数，延时时间);
    // 1 这个window在调用的时候可以省略
    // 2 这个延时时间单位是毫秒  但是可以省略 如果省略默认的是0
    // 3 这个调用函数可以直接写函数  还可以写函数名  还有一个写法 '函数名()'
    // 4 页面中可能有很多的定时器  我们经常给定时器加标识符  (名字)
    // setTimeout(function() {
    //   console.log('时间到了');
    // }, 2000);    // 2000ms = 2s   到了两秒钟之后就去调用这个函数
    function callback() {
      console.log('爆炸了');
    }
    var timer1 = setTimeout(callback,3000);  // 3秒钟之后调用函数
    var timer2 = setTimeout(callback,5000);  // 5秒钟之后调用函数
    // setTimeout('callback()',3000);  // 3秒钟之后调用函数  但是不提倡这个方法，上面的那个方法就很好 简洁
  

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

setTimeout() 这个调用函数我们也称为 $\color{red}{回调函数callback}$

普通函数是按照代码顺序直接调用。

而这个函数, $\color{red}{需要等待}$ 时间 , 时间到了才去调用这个函数 , 因此称为回调函数。

简单理解 : 回调,就是回头调用的意思。上一件事干完 , 再回头再调用这个函数。

以前学的element.onclick = function(){}或者element. addEventListener(“click” , fn);里面的函数也是回调函数。

案例：5秒后自动关闭广告

案例分析

核心思路 : 5秒之后 , 就把这个广告隐藏起来
用定时器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="images/ad.png" alt="" class="ad">
  <script>
    var ad = document.querySelector('.ad');
    setTimeout(function() {
      ad.style.display = 'none';
    },5000);
  </script>
</body>
</html>