- ベストアンサー
オブジェクト指向のsetTimeoutの呼び出し方法
オブジェクト指向を勉強中です しかし今一しっくりきません。 setTimeoutの呼び出し部分の記述は、これでいいのでしょうか？ やりたいことは、沢山の画像を一度に違ったタイミングでフェードアウト・インをすることです。 <html> <body> <img src="./img/1.gif" width="50" height="50" id="a"> <img src="./img/2.gif" width="50" height="50" id="b"> <input type="button" value="pp" onClick="img2.fin(10,50)"> <script> var img1 = new ImageEffect( 'a',100 ); img1.fout(10,30); var img2 = new ImageEffect( 'b',100 ); img2.fout(5,30); function ImageEffect( id,val1 ){ var func=[]; this.obj = document.getElementById( id ); this.opacity=(val1==undefined)? 100:val1; this.opacitySet = function(n){ this.obj.style.filter='alpha(opacity='+n+')'; this.obj.style.MozOpacity=n/100; this.obj.style.opacity=n/100; this.opacity = n; } this.fout = function(step,wtime){ func[id] = this; this.opacity-=step; if(this.opacity<1) this.opacity = 0; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fout( step, wtime);}, wtime);//ここの呼び出し } this.fin = function(step,wtime){ func[id] = this; this.opacity+=step; if(this.opacity>100) this.opacity = 100; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);//ここの呼び出し } }
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> ＞setTimeout( function(){ this.fin.call(this, step, wtime);}, wtime); > 動きませんでした^^; > 調べてみますね。 > できるなら見本を～！ ごめんなさい。最近bindに頼ってたので正しいやり方を忘れてました。 以下がサンプルになります。 <script> var objA = {}; objA.name = "objA"; objA.say = function(){alert("This name is " + this.name);}; //"This name is objA"を出すはず setTimeout( objA.say, 2000); //失敗 setTimeout( (function (this_) {return function() { this_.say.call(this_); }})(objA), 5000); //成功 </script> 最終行の外側のfunctionは、無名関数を返す無名関数で、 内側の無名関数が返却される無名関数です。 内側の無名関数を期待通りの動作をするように作ります。 なのであなたの場合はたぶんこうすればよい。(上のサンプルは試してますがこっちは試してません。) setTimeout( (function (this_, step_, wtime_) {return function() { this_.fin.call(this_, step_, wtime_); }})(this, step, wtime), wtime); > ちなみにprototype.jsは大きすぎて・・・ そういうときは、必要なところだけ抜き出すんですよ。 bindだけ使うなら$AとFunction.prototype.bindの定義だけ引っ張ってくれば10行程度です。 bindとbindAsEventListenerは便利だから、 理解した上で自分で同等のものを作っておくのもありだと思う。
その他の回答 (2)
- Werner
- ベストアンサー率53% (395/735)
> if( this.opacity ) setTimeout( function(){ this.fin( step, wtime);}, wtime); > にするとエラーになって、かなり自分的に悩みました。 そういう場合は、applyやcallを使えばよいのではないでしょうか。 動作確認はしてませんが、 setTimeout( function(){ this.fin.call(this, step, wtime);}, wtime); で動かない？ prototype.jsのbindを使ってもいいかもね。 prototype.jsのbindを理解する - cloned.log http://d.hatena.ne.jp/cloned/20070301 というか、よく見たら http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php でもapply/call使ってるじゃないですか。 せっかく自分で見つけたんですから参考にしましょうよ～。
補足
＞setTimeout( function(){ this.fin.call(this, step, wtime);}, wtime); 動きませんでした^^; 調べてみますね。 できるなら見本を～！ ちなみにprototype.jsは大きすぎて・・・ 頼らずにやってみたい！
- t_netbug
- ベストアンサー率34% (15/44)
どの辺がしっくり来ないのかが不明です。。。 このソースの場合だとsetTimeout内に無名関数を記述して、つまりpipiさんの書き方でしか書けないと思うんですが。 ちなみにsetIntervalを使用しなかった理由は何でしょう？ 学生時代がJavaだったせいかIntervalの方がRunnableインターフェースのrunと同じような書き方ができるので個人的には好きなのですけど。 勉強不足がばれそうですが、速度とかメモリの食い方が違うんですか？ それにしてもJavaScriptは面白いですね＞ｗ＜
補足
しっくりこないとは 「オブジェクト指向 setTimeout」で検索すると 以下のようなところにあたりました http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php なので、そのような書き方をすればいいのかと・・・ if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);を if( this.opacity ) setTimeout( function(){ this.fin( step, wtime);}, wtime); にするとエラーになって、かなり自分的に悩みました。 根本的なところを理解するのが不十分で消化不良な気がして質問してみました。 setIntervalを使用しなかった理由ですが、 作業が終了したら、clearTimeoutする必要があるし、そのtimeIdを 保存して置かなければならないためです。（基本的に短いコードが大好き！） 同じタイミングでもsetTimeoutの方が処理を終えるまで時間が必要だし、なめらかさを要求する処理には不向きな面がありますが、 やっぱり短いので使いました！だめかなぁ～？ ＞（その）書き方でしか書けないと思うんですが を見て、ちょっと安心しました^^; ＞それにしてもJavaScriptは面白いですね まったく同感です。 一ヶ月前のコードが古く感じてしまい、書き直しまくりで 前に進んでいないような気がしてます。 ありがとうございます
お礼
ありがとうございます！ 消化するのに時間がかかりそう！ まずは、お礼まで。
補足
一言で「すっげ～～！」です！ 感動です！ ほとんど暗号のようで理解に苦しみました！ 最初動かしたときにスペル間違いだったのか、全然動かず、 とにかく意味を必死に理解しようとして、数日を費やしました！ まだまだ奥が深いですね。 このような書き方がかける人に、あこがれますよ～！ 有難うございました。