不应该是定时器停了后,回调函数才触发吗?为什么我这里是先触发回调函数,然后定时器才停?
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");
});
});
};