私は DOM Scripting を読んでいて、以下の抽象化について初心者の質問があります。元のコードには「clearTimeout」が含まれておらず、「movement」がグローバル変数として宣言されていました。コードは正常に実行されましたが、スムーズなアニメーションではなかったため、clearTimeout が追加されました。しかし、私の質問は、「動き」をテストできず、失敗した場合 (moveElement への最初のマウスオーバー呼び出しで)、関数の残りの部分を続行する理由です。「動き」をプロパティにするのではなく、グローバル変数として保持すると、コードはまったく実行されませんか?
他の JS と HTML を確認するのに役立つ場合は、残りのコードをjsFiddleにプラグインしました。
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) { //Why can't I use "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_y) {
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); //Originally global property
}