[JS]setTimeoutでクラス関数を使いたい

質問

他の処理を待ってから、別の処理を実施したい場合に、setTimeoutを使用するのが
一般的だと思いますが、特定のクラスの関数を実行する方法がよくわかりません。

グローバル変数を使用する場合には以下で動きます。
※待機の部分は、問題を簡略化するため今回は3回実行完了まで、としています。
counter = 0;
max = 3;
method();

function method(){
if ( counter < max ) {
timerId = setTimeout(method, 10 );
console.log(counter);
counter++;
} else {
console.log("done");
}
}
出力は以下のとおり。
0
1
2
done

methodやcounter, maxなどを隠蔽するため、クラス関数を作り、以下のようにしました。
a = new test();
a.method();

function test(){
this.counter = 0;
this.max = 3;

this.method = function(){
if ( this.counter < this.max ) {
timerId = setTimeout(this.method, 10 );
console.log(this.counter);
this.counter++;
} else {
console.log("done");
}
}
}
出力は以下のようになってしまい、意図したように実行できていません。
0
done

このような場合、どのようにしてクラス関数を再呼び出しするのでしょうか。

回答No.1

askaaska · ベストアンサー

setTimeout関数は
setTimeout呼出し後、他の処理に関係なく、指定した時間後に指定した関数を実行する
よ
最初のコードが
0
1
2
done
になる保証はないわ
何かの原因で
console.log(counter);
が遅延した場合
0
0
2
done
なんていう風になる可能性もあるの

それはおいといて

setTimeout(this.method,10)
で呼び出された2回目のfunction内では、
thisはページ全体を指してしまうので
この記述だとif文のthis.counterがundefinedになって
doneの方に飛んでしまうわね
なので、関数内部ではthisで指定してはいけないわ
次のようにすればOK
・・・なはず（動作確認していないけど）
まあ、setTimeoutスレッド問題はむししているけど

function test(){
var o = this;
o.counter = 0;
o.max = 3;

o.method = function(){
if ( o.counter < o.max ) {
timerId = setTimeout(o.method, 10 );
console.log(this.counter);
o.counter++;
} else {
console.log("done");
}
}
}

お礼

なるほど～。とても参考になりました！！
setTimeoutは実際には一定間隔でループさせて
擬似的にwaitさせたいだけなので、
順番の維持とかは影響ないです。
ありがとうございました！！

回答No.3

fujillin

#2です。

ちょっと訂正。

if(--n>0)
　　↓
if(n-->0)

にしとかないとwaitが違ってしまうかも。

回答No.2

fujillin

methodの呼び出しはすでに回答がありますが、

＞擬似的にwaitさせたいだけなので
とのことですので、再呼び出しにこんな方法もあるかと…

var delay = function(n, func){
　　(function(){
　　　　if(--n>0)
　　　　　　setTimeout(arguments.callee, 10);
　　　　else
　　　　　　if(func && typeof func==="function") func();
　　})();
}

delay(300, function(){alert("hoge");});
delay(200, function(){console.log("done200");});
delay(100, function(){console.log("done100");});

// 結果は順に
//done100　(console)
//done200　(console)
//hoge　　(alert)

delay(n, func)の nは繰り返し回数、 funcは経過後のコールバック