785-788---BOM（定时器(setTimeout() 定时器)，案例：5秒后自动关闭广告，停止 setTimeout() 定时器，setInterval() 定时器）

香甜的甲基橙

已于 2022-05-13 09:57:03 修改

阅读量993

点赞数 1

分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端

于 2022-05-04 23:44:12 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124580208

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

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>

效果：广告显示五秒之后就会消失

3.3 停止 setTimeout() 定时器

window.clearTimeout(timeoutID)

clearTimeout ()方法取消了先前通过调用setTimeout ()建立的定时器。

注意:

window可以省略。
里面的参数就是定时器的标识符。

3.4 setInterval() 定时器

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval0方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

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

window可以省略。
这个调用函数可以 $\color{red}{直接写函数,或者写函数名}$ 或者采取字符串 $\color{blue}{'函数名()'}$ 三种形式。
间隔的毫秒数省略默认是0 ,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

eg 11-定时器之serinterval.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 setInterval
    // 语法规范： windows.setInterval(调用函数, 延时时间);
    setInterval(function() {
      console.log('继续输出'); 
    }, 1000);   // 每隔1s调用这个函数
    // 2 setTimeout 延时时间到了，就去调用这个回调函数，只调用一次  就结束了这个定时器
    // 3 setInterval 每隔这个延时时间，就去调用这个回调函数  会调用很多次  重复调用这个函数
    
  </script>
</body>
</html>

香甜的甲基橙

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
785-788---BOM（定时器(setTimeout() 定时器)，案例：5秒后自动关闭广告，停止 setTimeout() 定时器，setInterval() 定时器）

文章目录BOM3 定时器3.1 两种定时器3.2 setTimeout() 定时器案例：5秒后自动关闭广告3.3 停止 setTimeout() 定时器BOM3 定时器eg：此处轮播图有两张，它每隔一段时间就会播放下一个图片，这些跟时间打交道的效果，我们便可以使用定时器。3.1 两种定时器window对象给我们提供了2个非常好用的方法定时器。setTimeout()setInterval()3.2 setTimeout() 定时器window.setTimeout (调用函数,[延
复制链接

扫一扫