定时器

setInterval()

  • 定时调用
          可以将一个函数,每隔一段时间执行一次
          参数
              1. 回调函数,该函数每隔一段时间会被调用
              2. 每次调用间隔时间,单位是毫秒ms

          返回值:
            返回一个Number类型的数据
            返回这个数字作为定时器的唯一标识
  • clearInterval()取消定时器

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #box,
        #box2 {
          width: 100px;
          height: 100px;
          position: absolute;
        }
    
        #box {
          background-color: blueviolet;
          top: 100px;
        }
    
        #box2 {
          background-color: plum;
          top: 300px;
          
        }
      </style>
    </head>
    
    <body>
      <button id="btnLeft">向左移动</button>
      <button id="btnRight">向右移动</button>
      <div id="box"></div>
      <div id="box2" style="left: 1000px;"></div>
    
      <script>
        // 获取按钮和元素
        var box = document.getElementById("box");
        var box2 = document.getElementById("box2");
        var btnLeft = document.getElementById("btnLeft");
        var btnRight = document.getElementById("btnRight");
    
        // 为按钮绑定事件
        //宽度->高度- >向左
        btnLeft.onclick = function () {
          move(box,"width", 500, 10, function() {
            move(box,"height", 500, 10, function() {
              move(box,"left", 1000, 10, function() {
               alert("完成")
              });
            });
          });
        }
    
        // 为按钮绑定向右事件
        btnRight.onclick = function () {
          move(box2, "left", 8, 10, function() {
            // alert("wc")
          });
        }
    
    
        /* 
        定时器函数移动
          obj: 要执行动画的对象
          attr:要变化的属性
          target: 执行动画目标位置
          speed: 移动速度(右移动正数, 左移动负数)
          callback : 回调函数
         */
    
        function move(obj, attr, target, speed, callback) {
          //清除之前的定时器
          clearInterval(obj.timer);
    
          // 获取用户当前位置
          var currentPosition = parseInt(getStyle(obj, attr));
          console.log(currentPosition);
          // 判断速度
          if (currentPosition > target) {
            speed = -speed;
          }
          // 设置定时器
          obj.timer = setInterval(function () {
    
            //  获取原来位置
            var oldValue = parseInt(getStyle(obj, attr));
            // 设置新位置 
            var newValue = oldValue + speed;
            console.log(speed);
            console.log(newValue);
            // 判断位置
            if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
              newValue = target;
            }
    
            // 设置元素位置
            obj.style[attr] = newValue + "px";
            // 结束,关闭定时器
            if (newValue == target) {
              clearInterval(obj.timer)
              callback();
            }
          }, 30);
    
    
        }
    
        //获取样式简洁版
        function getStyle(obj, attr) {
          return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
        }
      </script>
    </body>
    
    </html>

     

     

setTimeout()

  • 延时调用
        延时调用一个函数不马上执行,而是隔一段时间以后再执行,而且只执行一次

 

posted @ 2020-09-22 16:10  CHUNYIN  阅读(104)  评论(0)    收藏  举报