appendChildを何処で書こうと、関数始めで動く物なのでしょうか

質問

appendChildを何処で書こうと、関数始めで動く物なのでしょうか？？
javascript初心者です。
色々実験しているのですが、今理解に苦しむ状況に陥っています。
まず、要素がゆっくり下に動いた後、下の要素の子になる事を意図して書いた下のコードを見て下さい。

//スライドアクションelementをoffsetだけ1pxずつinterval毎に動かす。
function slideDownCloser(element, offset, interval){
element.style.position = "abusolute";//relativeにしても問題は同じ
var pos = element.offsetTop;
function goDown() {
element.style.top = pos + "px";
pos += 1;
if(offset>pos) {
setInterval(goDown, interval);
}
else {
element.style.position = "static";
}
}
return goDown;
}
このクロージャが返した関数を呼び出した直後にelementをappendChildで別の要素内に移そうとしても、どうやらelementが移動先の親要素を基準にして動いてしまいます。
例えば、簡単に書くとこのような関数を書いてもshitaElから100px動いてしまいます。。
function addElement(event) {
var shitaEl = getElementById("shita");
var slideDown = slideDownCloser(event.target, 100, 30);
slideDown();
shitaEl.appendChild(event.target);
}
なを、この現象はMac版のsafariとfirefoxで確認しました。。また、event.targetプロパティがIEでは読み込めないので、IEでは動かないと思います。

回答No.1

steel_gray · ベストアンサー

とりあえずsetInterval は setTimeoutの間違い？

クロージャ云々は関係なくてsetTime～の動作を考えてみるといいかと。
（タイマー設定の関数はwaitがかかるわけではなくてタイマーハンドラを登録するだけです）

goDown内でsetTimeoutが実行された後、goDown、slideDown関数は終了。
即、addElementの次のステップ(appendChild)が実行されます。
タイマー契機で２回目以降のgoDown実行時、elementは既にshitaの子要素になってます。

offset>pos が偽になったタイミングでaddElementが実行されるような仕組みに組み替えるしかないですね。

お礼

今読むと良く理解出来ない質問文にも関わらず。回答ありがとうございます。
setIntervalはsetTimeoutのつもりで使っていましたが、動作が違うようですね。。
なるほど、そのような仕組みですか。。ちょっと組み替えてみます。