setTimeoutで引数を配列にできるか

質問

画面全体に50行×50列くらいのtd（背景色がピンク）を持ったtableを配置し、それぞれのtdにマウスが乗ったらそのtdの背景色を青くして、マウスがtdの外に出たら1秒後にピンク色に戻すものを作ろうと思ってます。つまり、tdを画素に見立てた簡単なペイントに似たものを作ろうということです。

そのために以下のjavascriptを書きました。

window.onload = function(){
td = document.getElementsByTagName("td");
for(i=0;i<td.length;i++){
td[i].onmouseover = ChCo;
td[i].onmouseout =　setTimeout("ClCo('"+td[i]+"')",1000);

}
function ChCo(){
this.style.backgroundColor = "blue";
}
function ClCo(hoge){
hoge.style.backgroundColor = "pink";
}
}

この場合、onmouseoverの青くするところはうまくいくのですが、onmouseoutのsetTimeoutのところがうまくいきません。どうも、setTimeoutに設定したClCoの引数がうまく渡ってないような感じなのですが、どこが間違っているのでしょうか。

回答No.1

redfox63 · ベストアンサー

TDタグのコレクションをグローバル変数にして pinkに変えるメソッドとmouseoutのハンドラを分けてみてはいかがでしょう

変数tdを スクリプトブロックの冒頭で宣言しておきます
var td;

pinkに変えるメソッドをchangePinkとします
window.onloadでは
td[i].onmouseout = ClCo;
としておきます

function ClCo()
{
　　var n;
　　for ( n = 0; n < td.length; n++ ) {
　　　　//　自分自身を配列tdから探します
　　　　if ( td[n] == this ) {
　　　　　　window.setTimeout( "changePink(" + n + ")", 1000 );
　　　　　　break;
　　　　}
　　}
}

function changePink( n )
{
　　td[n].style.backgroundColor = "pink";
}
といった具合で ・・・

お礼

ありがとうございます。提案された方法でうまく動作することができました。数日間悩んでいたのですが、やっと解決できました。ありがとうございました。

回答No.2

noname#87714

setTimeoutの引数でStringとして関数を指定する場合は、実行時にそれがevalされてグローバルスコープで実行されるためだと思います。しかし、ClCoは無名関数 (window.onloadに指定された) 内で定義されているため、グローバルスコープでは見えません。

しかも質問の例だと、ClCoにはtd[i]というオブジェクトを渡しているように見えますが、実際にはtd[i]をtoStringした文字列が渡されているだけです。

試してませんが、

setTimeout(function(){ClCo(td[i])},1000);

と無名関数で書くなどすればよいかもしれません。

お礼

提案された方法では、残念ながらうまくいきませんでしたが、setTimeoutの仕組みについて理解が深まりました。

ありがとうございました。