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;

}

​

// var obj = {};

// obj.name = 'andy';

// 简单动画函数封装obj目标对象 target 目标位置

// 给不同的元素指定了不同的定时器

function animate(obj, target) {

  // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

  // 解决方案就是 让我们元素只有一个定时器执行

  // 先清除以前的定时器，只保留当前的一个定时器执行

  clearInterval(obj.timer);

  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);

});

​