给不同对象添加不同定时器

Tutorial: DOM操作 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
      }

      span {
        position: absolute;
        left: 0;
        top: 200px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
      }
    </style>
  </head>

  <body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>

    <script>
      // 给不同的元素指定了不同的定时器
      function animate(obj, target) {
        // 当我们不断的点击按钮, 这个元素的速度会越来越快, 因为开启了太多的定时器
        // 解决方案就是 让我们元素只有一个定时器执行
        // 先清除以前的定时器, 只保留当前的一个定时器执行

        clearInterval(obj.timer);
        // if (obj.timer) return;

        obj.timer = setInterval(function () {
          if (obj.offsetLeft >= target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
          }
          obj.style.left = obj.offsetLeft + 1 + "px";
        }, 30);
      }

      var div = document.querySelector("div");
      var span = document.querySelector("span");
      var btn = document.querySelector("button");

      // 调用函数
      animate(div, 300);

      btn.addEventListener("click", function () {
        animate(span, 200);
      });
    </script>
  </body>
</html>
Prev: 简单动画函数封装 Next: 缓动动画原理