一文详解JavaScript定时器-51CTO.COM

什么是定时器？

定时器就是可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。

定时器和循环的区别要尤其注意，循环结构内部使用延时函数也可以实现定时器的重复执行效果，但是如果使用循环加延时，程序是阻塞的，会一直停留在循环过程中，循环结构后面的程序无法执行。即计算机资源一直处于被占用状态，消耗也很大。

定时器是只在触发的时刻执行指定功能，没有到触发时刻程序不会阻塞，按照顺序，正常执行定时器后面的程序。

setTimeout()

语法：

setTimeout(func,millisec)

参数	描述
func	要调用的函数后要执行的 JavaScript 代码串。
millisec	在执行代码前需等待的毫秒数。

功能：在指定的毫秒数后调用函数。

setTimeout(function(){
  alert("start");
}, 3000);

setInterval()

语法：

setInterval(func,millisec)

参数	描述
func	要调用的函数后要执行的 JavaScript 代码串。
millisec	周期性执行func的时间间隔，以毫秒计。

功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval(function(){
  console.log("hioier.com");
}, 1000);

简易计时器项目

实现一个计时器，绿色方框内数字从0开始，每隔1s增加1。

<style>
  #d1{
    width:200px;
    height:200px;
    color:white;
    font-size:100px;
    background:green;
    text-align:center;
    line-height:200px;
  }
</style>

<body>
  <div id="d1">0</div>
  <script>

    let d1 = document.getElementById("d1");

    let n = 0;
    setInterval(function(){
      d1.innerHTML = n++;
    }, 1000);
  </script>
</body>

跳跃坠落两张图片循环切换

例如：两张图片的名字分别为11.jpg和12.jpg，只需设置一个变量在11和12之间切换即可。

<style>
  #d1 {
    width: 500px;
    height: 400px;
  }
</style>

<body>
  <img id="d1" src="images/11.jpg"/>
  <script>

    let d1 = document.getElementById("d1");
    let n = 11;
    setInterval(function(){
      n++;
      if(n > 12)
        n = 11;
      
        d1.src = `images/${n}.jpg`;
    }, 500);

  </script>
</body>

停止定时器，按下停止跳跃按钮，停止跳跃。

<body>
  <img id="d1" src="images/11.jpg"/>
  <button id="btn_stop">停止跳跃</button>

  <script>

    let d1 = document.getElementById("d1");

    let btn_stop = document.getElementById("btn_stop");

    let n = 11;
    let timer = setInterval(function(){
      n++;
      if(n > 12)
        n = 11;
      
        d1.src = `images/${n}.jpg`;
    }, 500);

    btn_stop.onclick = function(){
      clearInterval(timer);
    }
  </script>
</body>

拆除炸弹

炸弹倒计时10s，如果没有拆除就会爆炸，现在请你点击按钮拆除炸弹。

<style>
      #d1 {
        text-align: center;
      }
      #d3 {
        width: 100px;
        height: 100px;
        color: white;
        font-size: 50px;
        background: green;
        text-align: center;
        line-height: 100px;
        margin: 0 auto;
      }
    </style>

<div id="d1">
      <button id="btn">
        开始拆弹
      </button>
      <div id="d2">
        <img src="images/7.gif"/>
        <div>
          <div id="d3">
            10
          </div>
        </div>
      </div>
    </div>

<script>
      let d3 = document.getElementById("d3");
      let btn = document.getElementById("btn");

      let n = 10;

      let timer = setInterval(function(){

        d3.innerHTML = n--;

        if(n < 0){
          alert("BOOM!");
          n = 10;
        }
      }, 1000);

      btn.onclick = function(){
        clearInterval(timer);
        alert("拆弹成功！");
      }
    </script>