javascript - In order to eliminate animation lag, why can't movement use either global variables or local variables?

Question

function moveElement(elementID,final_x,final_y,interval) {

var elem = document.getElementById(elementID);
if(elem.movement){
    clearTimeout(elem.movement);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);

if(xpos == final_x && ypos == final_y) {
    return true;
}
if(xpos < final_x) {
    xpos++;
}
if(xpos > final_x) {
    xpos--;
}
if(ypos < final_y) {
    ypos++;
}
if(ypos > final_x) {
    ypos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
elem.movement = setTimeout(repeat,interval);

}

Answer 1

如果使用全局变量，当有多个元素需要运动的时候，就需要声明多个变量来存放这些元素对应的定时器；

使用局部变量虽然不需要声明多个变量，但是有时候需要在外部判断一个元素是否正在运动，由于在函数外部访问不到该函数内的变量，从而无法拿到该元素对应的定时器值；

将定时器挂载到元素的自定义属性上就可以在任何地方都能拿到该定时器的值，从而知道该元素是否正在运动