JS 定时器（hhhhhh）

1.定时器

1.1 定时器的基本概念

• 定时器的分类

  • 延迟定时器：

    • 语法： ms 延迟一段时间执行函数一次

    • 作用：等待一定的时间后执行一次

    • 使用场景：广告弹窗

  • 间歇定时器：

    • 语法：setInterval(函数,时间) 隔一段时间执行函数一次

    • 作用： 隔一段时间执行函数一次

    • 使用场景：轮播图，倒计时，抽奖

1.2 setTimeout

• setTimeout(函数，时间) ：等待一定的时间后执行一次，一般用于广告弹窗

  /* 
    语法：setTimeout(函数，时间) ms：等一定的时间执行函数一次
         1s = 1000ms
  */
  setTimeout(function(){
      console.log("setTimeout(函数，时间) ms：等一定的时间执行函数一次");
  },2000); 
  ​
  //函数可以直接写到setTimeout中，也可以提前定义好
  setTimeout(delay,3000);
  function delay(){
      console.log("哈哈哈哈哈");
  }

1.3 setInterval

• setInterval(函数,时间) 隔一段时间执行函数一次,一般用于轮播图，倒计时，抽奖

  //语法：setInterval(函数，时间) ms：间隔一段是执行函数一次
  document.body.innerHTML = 1;
  var n = 1;
  ​
  setInterval(function(){
      n++;
      document.body.innerHTML = n;
  },1000);

• 同步异步

  • 同步：在做某一个事件的时候，其他操作只能等待 独木桥

    //同步：在做某一个事件的时候，其他操作只能等待   独木桥
    alert("fd");
    console.log("开始");
    for(var i = 0;i<1000;i++){
        console.log("i");
    }
    console.log("结束");

  • 异步：在做某一个事情的时候，可以去做其他操作 定时器

    // 异步：在做某一个事情的时候，可以去做其他操作   定时器
    console.log(1);
    setTimeout(function(){
        console.log("定时器");
    },1000);
    console.log(2);

1.4 停止定时器

• 停止定时器

  停止定时器：定时器只要一开始就不会主动停止，可以强制停止
  为什么停止：占用空间，影响性能
  语法：clearInterval(intervalId)
        clearTimeout(intervalId)
  intervalId:每一个定时器在开启的时候，都会返回一个能唯一标识当前定时器的id

• 例1： 定时器停止的是下一次的执行

  //2.点击按钮，开始倒计时
  

  oBtn.onclick = function(){
      var n = 5;
      oBtn.innerHTML = "5s后重新获取验证码";
      var timer = setInterval(function(){
          n--;
          if(n <= 0) {
              n = 0;
              //停止定时器
              clearInterval(timer);
          }
          oBtn.innerHTML = n + "s后重新获取验证码";
      },1000);
  }

• 移入停止离开开启：定时器只要一清除，就没有了

• //1.获取元素
  var oImg = document.getElementsByTagName("img")[0];
  var n = 1;
  ​
  //2.自动切换
  var timer = setInterval(auto, 1000);  //1
  function auto() {
      n++;
      if (n > 4) { n = 1 }
      oImg.src = "./img/" + n + ".jpg";
  }
  ​
  ​
  //3.鼠标移入停止定时器
  oImg.onmouseover = function () {
      clearInterval(timer);
  }
  ​
  //4.鼠标移出重新开始定时器
  oImg.onmouseout = function () {
      //每一次开启的定时器的id都不一样，一定要更新timer的id值
      timer = setInterval(auto,1000); //2  3
  }