onloadの実行待ち関数の使い方

質問

http://d.hatena.ne.jp/ynsyns/20090918/1253265108
ここのサンプルを試してみたいのですが、
使い方がよく分かりません。

addLoad(func);のfuncは何を指しているのでしょうか？

また、書く順番はどうなるのでしょうか？
・window.onload = function() {
・window.onload = func() {
・function addLoad(func){
・addLoad(func);
でしょうか？

それとも順番は関係ないのでしょうか？

回答No.2

fujillin · ベストアンサー

No1です

＞if文の中身はどういう意味なのでしょうか。
自分で確かめてみましょう。

例えば、 var oldonload=window.onload; の後に
　alert(typeof oldonload + "\n" + oldonload);
とでもして、実行してみれば何を判定しているかわかると思います。
（ブラウザによって、1回目のalertの内容が異なるかも）

ヒント：最初と2回目以降をif文で分けている。

補足

function funcA() { alert("A"); }
　　　　　function funcB() { alert("B"); }
　　　　　function funcC() { alert("C"); }

　　　　　function addLoad(func){
　　　　　　　　　alert("初めの処理\n");
　　　　　　　　　var oldonload=window.onload;//2回目以降有効
　　　　　　　　　alert(typeof oldonload + "\n" + oldonload);
　　　　　　　　　if(typeof window.onload!='function'){//window.onloadがfunctionかどうかの判定。window.onload = funcAだったら、true。それ以外のaddLoadだったら、False
　　　　　　　　　　　　　　window.onload=func;//ここでは、まだ実行されない。代入されるだけ
　　　　　　　　　　　　　　alert("条件判定true\n");
　　　　　　　　　　　　　　alert(window.onload);
　　　　　　　　　}else{
　　　　　　　　　　　　　　window.onload=function(){
　　　　　　　　　　　　　　alert("条件判定false\n");
　　　　　　　　　　　　　　alert(window.onload);
　　　　　　　　　　　　　　　　　　oldonload();
　　　　　　　　　　　　　　　　　　func();
　　　　　　　　　　　　　　}
　　　　　　　　　}
}

// window.onload = funcA;//もしくは、addLoad(funcA);
alert("funcA呼び出し\n"); addLoad(funcA); alert("funcA終了\n");
alert("funcB呼び出し\n"); addLoad(funcB); alert("funcB終了\n");
alert("funcC呼び出し\n"); addLoad(funcC); alert("funcC終了\n");

試してみたのですが、２箇所わかりませんでした。
１.funcBを呼び出した後に、ifに行かずにfuncBを終了するのはなぜでしょうか？
２.最後に、ABCがalert表示されるのですが、これは、elseのfunc();で実行されているのでしょうか？

回答No.1

fujillin

参考サイトに説明されている通りなので、他に説明することも無いのですが…

function funcA() { alert("A"); }
function funcB() { alert("B"); }
function funcC() { alert("C"); }
があったとして、

　window.onload = funcA;
　window.onload = funcB;
　window.onload = funcC;
としても、最後のfuncCしか実行されない。（上書きされるので）

うっかりこのようなことを起こさないように、addLoad()を定義しておいて、
　window.onload = funcA;
　addLoad(funcB);
　addLoad(funcC);
みたいにすれば、全部実行できますよということ。

もちろん
　addLoad(funcA);
　addLoad(funcB);
　addLoad(funcC);
でもいけるので、こちらの方が間違いないかも。

＞書く順番はどうなるのでしょうか
順序が関係するのは、addLoadやwindow.onloadの記述順序のみで、function定義の順序は関係ありません。
　addLoad(funcB);
　addLoad(funcC);
　window.onload = funcA;
addLoadを使っても、↑なんてすればやっぱりfuncAしか実行されません。

参考サイトにも記述されていますが、他の方法として、
　addEventListener
について調べてみるのがよろしいかも。

補足

function funcA() { alert("A"); }
function funcB() { alert("B"); }
function funcC() { alert("C"); }

function addLoad(func){
　var oldonload=window.onload;
　if(typeof window.onload!='function'){
　　window.onload=func;
　}else{
　　window.onload=function(){
　　　oldonload();
　　　func();
　　}
　}
}

window.onload = funcA;//もしくは、addLoad(funcA);
addLoad(funcB);
addLoad(funcC);

上記で試したところ、目的通り動いたのですが、
function addLoad内の処理がなんで、これでいいのか、
よく分かりません。
if文の中身はどういう意味なのでしょうか。

ちなみに、アドバイスに基づき検索して、
addEventListenerで、実際に動かすことが出来たのですが、
出来れば、こちらのコードも理解しときたいと思ってます…、。