我的回调函数怎么先触发了

不应该是定时器停了后，回调函数才触发吗？为什么我这里是先触发回调函数，然后定时器才停？

window.onload = function () {
        let div1 = document.querySelector("#div1");
        let btn1 = document.querySelector("#btn1");
        let btn2 = document.querySelector("#btn2");
function animation(obj, speed, style, target, callback) {
  if (parseInt(getComputedStyle(obj, null)[style]) >= target) {
    speed = -speed;
  }
  obj.name = setInterval(function () {
    let oldValue = parseInt(getComputedStyle(obj, null)[style]);
    let newValue = oldValue + speed;
    if ((newValue > target && speed > 0) || (newValue < target && speed < 0)) {
      newValue = target;
    }
    obj.style[style] = newValue + "px";
    if (newValue === target) {
      clearInterval(obj.name);
      callback();
    }
  }, 30);
}
        btn2.addEventListener("click", function () {
          animation(div1, 13, "left", 800, function () {
            alert("guolaile");
          });
        });
        btn1.addEventListener("click", function () {
          animation(div1, 15, "left", 0, function () {
            alert("huilaile");
          });
        });
      };

简单地说 你最后一次执行计时器，这个计时器已经开始了，虽然你在执行的过程中停止了这个计时器，但是最后一次执行定时器不会立即终止不执行，依旧会向下执行走完

定时器是30毫秒跑一次，在newValue === target才清除，那么在定时器还没清除的时候就会打印alert()

这个简单的例子给你看你就明白了，循环结束了，但是并没有跳出当前执行，只是不会有下一次执行了而已。

      let flag = true;
      while (flag) {
        flag = false;
        alert(111);
      }