【Javascript】Forのループ計算からボタンやキー操作で抜け出したい

Javascriptを使用して下記の様な作業をしています。

画面を見ながら適当な画像が表示された時にボタンやキー操作などでfor文を抜け出し、その時のパラメーターを得たいのですが、ループから抜け出す方法がわかりません。
Javascriptにはあまり詳しくないので色々調べてみたのですが、JavaScriptはシングルスレッドという理由で、なかなかこの目的にあった情報を見つけることができませんでした。setTimeoutがキーになりそうな気もしたのですが、残念ながら私のレベルではこのようなループにどのように適用するのかわかりませんでした。
初心者なので具体的にわかりやすくご説明していただけるとありがたいです。よろしくお願いいたします。

for(var j=0; j<300; j++){
	for(var i=0; i<300; i++){
		＜作業内容＞
		　①i、jに応じてパラメーターを変更
		　②変更したパラメーターを使用して計算
		　③計算結果をCanvasに表示
	}

	**■■　ボタンやキー操作をした時、ここで計算を中止し、For文から抜けだしたい。■■**

}

行動規範の内容に同意します

回答3件

ベストアンサー

そもそも論で、基本的にforをキー操作で止めることはできません。（可能っちゃ可能だけど回りくどい）

ただ、forやwhileにはifの条件分岐でbreak;をすることによってループから抜け出すことができます。

setIntervalを使うなら

JS
1var i = 0;
2var roop = setInterval(function(){
3  //forなどの処理
4  i++;
5  document.addEventListener('keydown', function(){
6    clearInterval(roop);
7  }
8  if(i>300){
9    clearInterval(roop);
10  }
11},1);
12

投稿2019/12/04 09:24

編集2019/12/04 09:35

kyoya0819

総合スコア10429

kyoya0819

2019/12/04 09:36

まぁ、この方法好きじゃないですけど

tulip

2019/12/04 12:38

asuchi0819さん、ご回答いただきましてどうもありがとうございます。確かに、この方法ですとスマートさは別にすると動きそうだと思いました。早速、簡単なコードを作って動作確認をしてみました。私の場合はForが二重になっているので、外側のFor部分に setInterval を適用してみましたコードの動作確認のため、console.log をたくさん設置しているので、見苦しいかと思いますが、keydownによって途中で抜け出すことができました。大変助かりました。どうもありがとうございました。ところでコンソール画面を見ていて気が付いたのですが、keydownで抜け出した後、あるいは j=jmax で終了後、キー操作を行うとコンソールに「■ keydown j=　XXX　■」と表示される時があります。本来なら clearInterval(roop) で終了しているのでこのようなことはないと思うのですが、これをなくすにはどうすればよろしいのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>stop_For</title> <script> var output = document.getElementById("output"); function startFor(){ var i; var j=0; var imax=10000; var jmax=10; var roop = setInterval(function(){ for (i=0; i<imax; i++) { var foo = Math.random(); console.log("@i= " + i); } console.log("i= " + i + " j=" + j); j++; document.addEventListener('keydown', function(){ console.log("■ keydown j=" + j + "■"); clearInterval(roop); }) if(j == jmax){ console.log("■ j=jmax　 j=" + j + "■"); clearInterval(roop); } },1); console.log("■For開始■　i= " + i + " j=" + j); } </script> </head> <body> <div id="clock"></div> <div style = "background-color: #ffff00;"> <input type="button" id="startForloop" onclick="startFor()" value="Forループの開始">   </body> </html>

kyoya0819

2019/12/04 13:29 編集

当方環境では確認できませんでしたのでおそらくの回答ですが、imaxの値が大きすぎる気がします。0.001秒に10000回の処理はできないです。事実当方の環境ではクラッシュしました。

kyoya0819

2019/12/06 10:54 編集

setIntervalが使われないのには理由があります。 0.001秒に1回、forを行うので 1000回forを行うとなると1秒程度時間がかかってしまいます。

行動規範の内容に同意します

ループ1回ごとに表示が変わるなら、「canvas アニメーション」で調べてみてください。

【JavaScriptとcanvasでアニメーションを作る】
https://sbfl.net/blog/2017/08/21/javascript-canvas-animation/

【Canvasアニメーションの要点 - Qiita】
https://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

投稿2019/12/04 12:56

kei344

総合スコア69596

tulip

2019/12/04 13:50

kei344さん、コメントどうもありがとうございました。精読はしていませんが、ループで所定の規則に従ってキャンバス上の画像を動かしているのはわかりました。ただ私が知りたいことは、ループへの割り込みのかけ方です。例えば「ESCキーを押して動きを止める具体的な方法」といったものです。確かにゲーム等ではありそうなものだと思いますが、私が初心者レベルのせいかご紹介いただいた記事の中には無いように思えました。

kei344

2019/12/04 13:52

「そういうやり方をしない、こう言う風にやる」という回答です。forは回っている間ブラウザは他の動作を受け付けません。なので、提示の物のように処理する必要があるのです。

tulip

2019/12/05 00:06

今回の質問の目的は割り込みをすることです。従って For文の2重ループにはこだわりませんが、同じ効果を得られる方法がご紹介いただいた「canvas アニメーション」にあればそれを勉強したいと思います。例えば、asuchi0819 さんのご回答の方法によれば setInterval を使用することにより目的を達成できそうです。

行動規範の内容に同意します

なにをしたいかわかりかねるところもありますが
もし二重ループを抜けたいということであればラベルをつけてbreakします

javascript
1var x=0;
2var y=0;
3for(var j=0; j<300; j++){
4  for(var i=0; i<300; i++){
5    x=j*300+i;
6    y++;
7    if(x>=1000) break; //単にブレークすると外側のループがまわりつづける
8  }
9}
10console.log([x,y]); //結果[ 89700, 1297 ]

javascript
1var x=0;
2var y=0;
3out_loop:
4for(var j=0; j<300; j++){
5  for(var i=0; i<300; i++){
6    x=j*300+i;
7    y++;
8    if(x>=1000) break out_loop; //外側のラベルをしてbreak
9  }
10}
11console.log([x,y]); //結果[ 1000, 1001 ]

投稿2019/12/04 09:29

編集2019/12/04 09:29

yambejp

総合スコア116688

tulip

2019/12/04 12:45

yambejpさん、早速のご回答、どうもありがとうございます。作業内容は、内側のループで i、j に基づいて作画パラメーターを計算して画像を描きます。描き終わったら i の値を一つ進めて作画パラメータを計算しなおして画像を描きなおします。このような画像を画面で見ながら、適当な画像が現れた時にキー操作等でループを抜け出して、その時の作画パラメーターを得るのが目的です。

行動規範の内容に同意します

あなたの回答