定时器与运动函数封装

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
  }

2.运动函数封装

2.1 起飞（从左往右）

• 实现思路：

  • 点击设置img的left值

  • left值 = 当前元素的位置 + 10；

    oBtn.onclick = function () {
            //2.当前的位置的基础上 + 10
            var cur = parseInt(getStyle(oImg, "left")) + 10;
        
            //1.改变元素的位置
            oImg.style.left = cur + "px";
        }, 50);
    }

  • 问题1：一直飞，飞出界，限制范围1000的位置停止

    oBtn.onclick = function () {
        setInterval(function () {
            //2.当前的位置的基础上 + 10
            var cur = parseInt(getStyle(oImg, "left")) + 10;
            
            //3.如果到1000的位置，停止定时器
            if(cur >= 1000){
                cur = 1000;
                clearInterval(timer);
            }
            
            //1.改变元素的位置
            oImg.style.left = cur + "px";
        }, 50);
    }

  • 问题2：越点越快

    oBtn.onclick = function () {
        //问题：越点越快
        //原因：定时器会叠加，点击一次添加一个
        //解决：在开启定时器之前，把之前开的定时器停掉
        //4
        clearInterval(timer);
        timer = setInterval(function () {
            //2.当前的位置的基础上 + 10
            var cur = parseInt(getStyle(oImg, "left")) + 10;
    
            //3.如果到1000的位置，停止定时器
            if(cur >= 1000){
                cur = 1000;
                clearInterval(timer);
            }
    
            //1.改变元素的位置
            oImg.style.left = cur + "px";
        }, 50);
    }

2.2 返航

• 实现返航（从右到左，-10，条件为<=)

  oBtn.onclick = function () {
      clearInterval(timer);
      timer = setInterval(function () {
          //2.当前的位置的基础上 + 10
          var cur = parseInt(getStyle(oImg, "left")) - 10;
  
          //3.如果到1000的位置，停止定时器
          if(cur <= 0){
              cur = 0;
              clearInterval(timer);
          }
          
          //1.改变元素的位置
          oImg.style.left = cur + "px";
      }, 50);
  }

2.3 封装

• 声明一个函数，把主要代码放入函数中

• 找函数中可变的值，做参数

• 调用调试

  function fly(elem,attr,step,target) {//元素，属性，步长，目标值
      clearInterval(timer);
      timer = setInterval(function () {
          //4.获取现有位置 +10
          var cur = parseInt(getStyle(elem, attr)) + step;
          //5.如果到目标值的位置，停止
          if (cur >= target) {
              cur = target;
              clearInterval(timer);
          }
          //3.设置图片的位置
          elem.style[attr] = cur + "px";
      }, 30)
  }

2.4 条件判断问题

• 问题：只有一个方向有作用，另一个方向直接闪现

• 解决：判断加并且条件

  function move(elem,attr,step,target) {
      clearInterval(timer);
      timer = setInterval(function () {
          //4.获取现有位置 +10
          var cur = parseInt(getStyle(elem, attr)) + step;
  
          //5.到达目标点停止定时器
          if ((cur >= target && step > 0) || (cur <= target && step < 0)) { //起飞
              cur = target;
              clearInterval(timer);
          }
  
          //3.设置图片的位置
          elem.style[attr] = cur + "px";
      }, 30)
  }

2.5 步长问题

• 问题：需要用户考虑步长正负，用户体验不好

• 解决：只给步长值，正负在函数中确定

  function move(elem,attr,step,target) {
      //判断步长正负   当前值0    目标值1000   +   
      step = parseInt(getStyle(elem, attr)) < target ? step : -step;
      clearInterval(timer);
      timer = setInterval(function () {
          //4.获取现有位置 +10
          var cur = parseInt(getStyle(elem, attr)) + step;
  
          //5.到达目标点停止定时器
          if ((cur >= target && step > 0) || (cur <= target && step < 0)) { //起飞
              cur = target;
              clearInterval(timer);
          }
  
          //3.设置图片的位置
          elem.style[attr] = cur + "px";
      }, 30)
  }

3.轮播图

3.1 轮播图布局