javascriptのforループ中の変数について質問です。

質問

javascriptのforループ中の変数について質問です。
下記のようなコードを書きました。
function test(){
for (i = 0;i < 3;i++){
var msg = "msg"+i;
setTimeout(function(){
alert(msg);
},1000 * i);
}
}
これを実行すると、１秒間隔で順番に"msg2"→"msg2"→"msg2"と表示されます。
しかし、期待する動作は１秒間隔で順番に"msg0"→"msg1"→"msg2"なのです。
この動作を実現するために、どのようにスクリプトを修正すればよいか、ご教授いただければ幸いです。

回答No.5

my-- · ベストアンサー

function test(){
var msg = [];
var n = 0;
for (i = 0;i < 3;i++){
msg[i] = "msg"+i;
setTimeout(function(){
alert(msg[n++]);
},1000 * i);
}
}

「修正」てことなので普通に。

質問にある変数msgの値が「"msg0"→"msg1"→"msg2"」となるのは
for文内で参照した場合です。
setTimeoutに渡した関数の実行は早くてもfor文を抜けた後になりますから
それぞれの関数実行時に期待する値を参照するための工夫が必要になります。

お礼

ご回答ありがとうございました。
setTimeoutに渡した関数の実行のタイミングを勘違いしていたことに、ようやく気づきました。
まことにありがとうございました。

回答No.4

babu_baboo

ひらめいたので、だれかにかかれるまえに、ついか！（さんこうにもなりませんが・・）

function test() {
　for(var i=0,p=[];i<3;p.push('setTimeout(function(){alert("msg'+i+++'")},'+i+'000);'));
　eval(p.join(''));
}

回答No.3

babu_baboo

きっとまだまだあるにちがいない。さらにもとむ。

function test( ) {
　for( i = 0; i < 3;　) {
　　var msg = "msg" + i;
　　var func = makeFunction( msg );
　　setTimeout( func, 1000 * ++i);
　}
}

function makeFunction( s ) {
　var func = function( ) {
　　alert( s );
　};
　return func;
}

//___

function test1 ( ) {
　for( var i = 0; i < 3;　) {
　　var msg = "msg" + i;
　　setTimeout( (function( s ) {
　　　return function () {
　　　　alert( s );
　　　};
　　})( msg ), 1000 * ++i );
　}
}

//___

function test2(i) {
　for(i=3;setTimeout((function(s){return function(){alert('msg'+s)}})(i-1),i*1000),--i;);
}

//___

function chk( n ) {
　alert( 'msg' + n );
　return n < 2;
}

//0のとき待ちがないけど
var cnt3 = 0;
function test3( ) {
　chk(cnt3++) && setTimeout( arguments.callee, 1000 );
}

//___

var test4 = (function ( chk ) {
　var cnt4 = 0;
　var time = 1000;

　return function ( ) {
　　chk( cnt4++ ) && setTimeout( arguments.callee, time );
　};
})(
　function ( n ) {
　　alert( 'msg' + n );
　　return n < 2;
　});

お礼

ご回答ありがとうございます。
多くのスクリプトをご提示いただき、大変参考になります。

回答No.2

ryu_chan

setTimeoutで設定した無名関数内でさらにその無名関数をsetTimeoutするのはいかがでしょうか？

function test(){
var i = 0;
setTimeout(function(){
var msg = "msg" + i;
if( ++i < 3 ) setTimeout(arguments.callee, 1000);
alert(msg);
},1000);
}

お礼

ご回答ありがとうございます。
ご提示いただいたソースで期待どおりの結果が出ることを確認できました。
逆転の発想ですね！

回答No.1

bin-chan

JavaScriptでは、Sleep関数に相当するものがありません。
代替案は、検索サイトで「JavaScript　Sleep」をキーワードに検索すると良いかも。

お礼

ご回答ありがとうございます。
おっしゃるとおり、本来はsleepを検討すべきですね。