[武汉|结业弟子]JS-万晶|2020年04月15日的日报-技能树.IT修真院

发表于： 2020-04-15 23:52:01

1 1608

今天完成的事情：今天写了一个定时弹出广告和关闭广告的实际测试
明天计划的事情：继续后续的学习
遇到的问题：实际操作还是太少需要更多的练习以及深刻的理解
收获：操作这个主要用到的是定时器的应用

JS设置定时器和清除定时器

在做项目中难免会碰到需要实时刷新，动画依次出现等等需求，这时候就需要定时器登上我们的代码舞台了，所以今天我们就先来了解一下JS定时器的设置和清除吧。

一、启用定时器

window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：

window.setTimeout(code,millisec);

window.setInterval(code,millisec);

其中，code可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec，表示延时或者重复执行的毫秒数。

具体写法如下：

函数名，不带参数

setTimeout (test,1000)； //1秒后执行

字符串，可以执行的代码

setTimeout ('test()',1000)； //1秒后执行

匿名函数

setTimeout (function(){},1000)； //1秒后执行

注：setInterval的用法与setTimeout一样

调用函数，带参数

setTimeout ('test(参数)',1000)； //1秒后执行

注：如果不小心写成了setTimeout (test(参数),1000)；test方法就会立即执行哦。

二、清除定时器

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。

定时器清除的方法：clearTimeout(obj)和clearInterval(obj)。

要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。如下：

//setTimeout 1000ms后执行1次
    var test1 = setTimeout(function () {
      //your codes
    }, 1000);

    //setInterval 每隔1000ms执行一次
    var test2 = setInterval(function () {
      //your codes
    }, 1000)

    //清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
    clearTimeout(test1);

    //清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
    clearInterval(test2);

完成页面定时弹出广告一般网页，当我们刚打开的时候，它会2秒之后，显示一个广告，让我们看3秒钟，然后他的广告就自动消失了！

定时器

setInterval : 每隔多少毫秒执行一次函数

setTimeout: 多少毫秒之后执行一次函数

clearInterval

clearTimeout

显示广告 img.style.display = "block"

隐藏广告 img.style.display = "none"

确定事件: 页面加载完成的事件 onload

事件要触发函数: init()

init函数里面做一件事:

启动一个定时器 : setTimeout()

显示一个广告

再去开启一个定时5秒钟之后,关闭广告

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>定时弹出广告</title>
  <!--
      1. 确定事件: 页面加载完成的事件 onload
      2. 事件要触发函数:  init()
      3. init函数里面做一件事: 
         1. 启动一个定时器 : setTimeout() 
         2. 显示一个广告
            1. 再去开启一个定时5秒钟之后,关闭广告
    -->
  <script>
    function hideImg() {
      var img = document.getElementById("img2");
      img.style.display = "none";
    }
    function showImg() {
      var img = document.getElementById("img2");
      img.style.display = "block";

      setTimeout("hideImg()", 3000)
    }
    function init() {
      setTimeout("showImg()", 2000)
    }
  </script>
</head>

<body οnlοad="init()">
  <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2" />

</body>

</html>