前回の続きでjQuery javascriptの質問です

Question

長いコードになるので省略します。前回の続きです。

function komanari() {
		for(var i=0; i<arguments.length;  i++) {
			if($selectedKoma.hasClass(arguments[i][0])) {
				if(dropnum<40 || datanum<40) {
					confirm(arguments[i][0] + 'は'+ arguments[i][1] +'に成れます');
				}
			}
		}
	}

このように書くとエラーが起きないんですが、

function komanari() {
		for(var i=0; i<arguments.length;  i++) {
			if($selectedKoma.hasClass(arguments[i][0])) {
				if(dropnum<40 || datanum<40) {
					setTimeout(function(){
						confirm(arguments[i][0] + 'は'+ arguments[i][1] +'に成れます');
					}, 20);
				}
			}
		}
	}

こうやって、セットタイムアウトをいれると、
Uncaught TypeError: Cannot read property '0' of undefined
とエラーになって処理ができません。
こういった場合、どう書けばエラーがでずに、セットタイムアウトを入れることができますでしょうか。
よろしくお願いします。

Answer 1

JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる

setTimeout は引数として渡した関数を非同期に実行します。ですのでループ内で使えません。
非同期処理について調べてください。

追記

なお、Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する のように Promise を使うのがコードを書く上では簡単ですが、まずその概念がややこしいかもしれませんので、Promise について調べるのがいいかもしれません。

Comments

[gomatan1258]

ご回答ありがとうございます。非同期処理について、調べさせていただこうと思います。同期や非同期などわからないことが多いのでこれから頑張って勉強しようと思います。ありがとうございました。

Answer 2

余りこういうのはお勧めしませんが…。
以下で出来るかと。

function komanari() {
        for(var i=0; i<arguments.length;  i++) {
            if($selectedKoma.hasClass(arguments[i][0])) {
                if(dropnum<40 || datanum<40) {
          var outerFuncArguments = arguments[i];
                  any(outerFuncArguments);
                }
            }
        }
    }
function any(outerFuncArguments ){
                setTimeout(function(){
                confirm(outerFuncArguments [0] + 'は'+ outerFuncArguments[1] +'に成れます');
                    }, 20);
}

Zuishinさんがおっしゃっているとおり、非同期、コールバック、クロージャ、Promiseなど勉強されてください。

Comments

[gomatan1258]

ご回答ありがとうございます。Zuishinさんがおっしゃったように、for文のようなループの中で使えないので、ループの外でプログラムを書くとうまくいくということですよね？とても勉強になりました。