質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1339閲覧

[jQuery]onイベント内での読み込みの順番について

dounatsu

総合スコア78

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/04 22:12

編集2019/04/05 01:06

こんにちは。表題のonイベントで挙動があまりよくわからないところがあるので質問させていただきます。

現在下記の様な処理をしているのですが、console.logのところでsetA後の値が出力されてしまいます。(下の例ではsetA前の値が出力されます)。
実際のsetAに該当する部分には特に非同期処理等は含まれていないので、クリックイベントが発生した時には素直に上から読み込まれると思っていたのですが、何を見落としているか分からないので、ご教授頂けたら幸いです。
元のファイルはこちらで確認できますが、ちょっと長いので下の様に簡素にしました。

元の例を見ないともちろん確定はできないと思うのですが、時間もかかりますのでもし下の例からだけでお分かりになることがあれば教えてください。

よろしくお願いします。

javascript

1 2let a = 1; 3let b = 2; 4 5$('#id').on('click', function(){ 6 console.log(a); 7 const c = $(this).index(); 8 setA(b, c); 9 }); 10 11function setA(b,c){ 12 a = b + c; 13} 14

追記

単純化させたコードを載せて逆に混乱させてしまった様なので、少々長いですが、コード全文載せます。
onイベントの中のplacePieceというメソッドはboardという変数に新たな値を代入するメソッドなので、console.log(board)(*1)では変更前のboardを表示して、console.log(board)(*2)では変更後の値が表示されることを期待していたのですが、どちらも変更後(つまりplacePieceメソッドが動作した後)の値を表示しています。

placePiece自体が期待した動作をしていないので、読み込みの順番がおかしいのは何となく分かっているのですが、どこが間違っているのか分からないので質問させていただきました。

boardという変数に新たな値を代入する直前でconsole.logしても新しい値の代入後のboardが表示されるので、混乱しています。

javascript

1 2<!DOCTYPE html> 3<html lang="en" dir="ltr"> 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 <style> 8 #reversiTable { 9 border: 2px solid black; 10 background: #2A2; 11 } 12 #reversiTable td { 13 border: 2px solid black; 14 width: 100px; 15 height: 100px; 16 } 17 .blackPiece{ 18 width: 70px; 19 height: 70px; 20 background: black; 21 border-radius: 50%; 22 margin: auto; 23 } 24 .whitePiece{ 25 width: 70px; 26 height: 70px; 27 background: white; 28 border-radius: 50%; 29 margin: auto; 30 31 } 32 </style> 33 </head> 34 <body> 35 <div> 36 <table id="reversiTable"> 37 38 </table> 39 </div> 40 41 <div id="id"> 42 </div> 43 44 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 45 <script type="text/javascript"> 46 (function(){ 47 // set borad 48 let table = document.getElementById("reversiTable"); 49 for (let i = 0; i < 8; i++) { 50 let tr = document.createElement('tr'); 51 table.appendChild(tr); 52 } 53 54 let trElem = table.children; 55 for (let i = 0; i < 8; i++) { 56 for (var j = 0; j < 8; j++) { 57 let td = document.createElement('td'); 58 trElem[i].appendChild(td) 59 } 60 } 61 62 tds = $('td'); 63 for (var i = 0; i < tds.length; i++) { 64 tds.eq(i).attr('value', i); 65 tds.eq(i).attr('class', 'tdElements'); 66 tds.eq(i).attr('id', 'tdId-' + i); 67 tds.eq(i).append("<div></div>") 68 } 69 70 71 72 // initialize reversi pieces 73 let serializedBoard = []; 74 let board = []; 75 let activePlayer = 1; 76 77 for (var i = 0; i < 64; i++) { 78 serializedBoard.push(0); 79 } 80 81 serializedBoard[27] = 2; 82 serializedBoard[28] = 1; 83 serializedBoard[35] = 1; 84 serializedBoard[36] = 2; 85 86 for (var i = 0; i < 8; i++) { 87 let array = []; 88 for (var j = 0; j < 8; j++) { 89 array.push(serializedBoard[8*i + j]); 90 } 91 board.push(array); 92 } 93 94 for (var i = 0; i < serializedBoard.length; i++) { 95 if (serializedBoard[i] === 1){ 96 $("#tdId-"+i+" > div").addClass('whitePiece'); 97 } else if (serializedBoard[i] === 2){ 98 $("#tdId-"+i+" > div").addClass('blackPiece'); 99 } 100 } 101 102 for (var i = 0; i < serializedBoard.length; i++) { 103 const x = i % 8; 104 const y = Math.floor(i / 8); 105 board[y][x] = serializedBoard[i] 106 } 107 108 109 // 110 // functions of reversi 111 // 112 113 $('td').on('click', function(){ 114 115 console.log(board); // *1 116 117 // クリック箇所の取得 118 const posX = $(this).index(); 119 const posY = $(this).parent().index(); 120 121 // 石をひっくり返すメソッド 122 placePiece(posX, posY, activePlayer); 123 124 // 盤面の状態を2次元配列から1次元配列にするメソッド 125 serializeTheBoard(); 126 127 // 盤面の状態を表す配列から石が置いてある場所にCSSを適用するメソッド 128 setColorOfPieces(); 129 130 console.log(board); // *2 131 132 }); 133 134 function placePiece(_posX, _posY, _activePlayer){ 135 let opponent = getOpponent(_activePlayer); 136 if (board[_posY][_posX] === 0){ 137 turnOverPiece(_posY, _posX, opponent); 138 switchActivePlayer(_posY, _posX, _activePlayer); 139 140 }else{ 141 return; 142 } 143 } 144 145 function getOpponent(_activePlayer) { 146 if (_activePlayer === 1){ 147 return 2; 148 }else{ 149 return 1; 150 } 151 } 152 153 function switchActivePlayer(_posX, _posY, _activePlayer){ 154 if (board[_posY][_posX] === activePlayer){ 155 if (activePlayer === 1) { 156 activePlayer = 2; 157 }else{ 158 activePlayer = 1; 159 } 160 } 161 } 162 163 function turnOverPiece(posY, posX, opponent){ 164 for (var i = -1; i <= 1; i++) { 165 for (var j = -1; j <= 1; j++) { 166 if (board[posY+j][posX+i] == opponent){ 167 flipPieces(posY, posX, j, i, opponent); 168 } 169 } 170 } 171 } 172 173 174 function flipPieces(posY, posX, j, i, opponent){ 175 let counter = 1; 176 let initDiffX = i; 177 let initDiffY = j; 178 do { 179 counter++; 180 diffX = initDiffX * counter; 181 diffY = initDiffY * counter; 182 183 if (board[posY + diffY][posX + diffX] === 0){ 184 break; 185 }else if (board[posY + diffY][posX + diffX] === activePlayer){ 186 for (var a = 1; a < counter; a++){ 187 board[posY + (a * j)][posX + (a * i)] = activePlayer; 188 } 189 board[posY][posX] = activePlayer; 190 } 191 192 } while (board[posY + diffY][posX + diffX] == opponent); 193 } 194 195 196 function serializeTheBoard(){ 197 for (var i = 0; i < serializedBoard.length; i++) { 198 const x = i % 8; 199 const y = Math.floor(i / 8); 200 serializedBoard[i] = board[y][x]; 201 } 202 } 203 204 function setColorOfPieces(){ 205 for (var i = 0; i < serializedBoard.length; i++) { 206 if (serializedBoard[i] === 1){ 207 $("#tdId-"+i+" > div").addClass('whitePiece'); 208 } else if (serializedBoard[i] === 2){ 209 $("#tdId-"+i+" > div").addClass('blackPiece'); 210 } 211 } 212 } 213 214 215 216 217 218 })(); 219 220 221 </script> 222 </body> 223</html> 224 225 226

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/04/04 22:40

最低限、その現象が再現する例を出してください。書かれたコードで再現しないということは、今書かれている枠組みには「問題がない」ということを示していることになります。
dounatsu

2019/04/04 22:50

ご指摘の件はごもっともなのですが、色々試しても再現できなかったので、簡略化したコードと実際に問題の出ているコードのリンクを貼らさせて頂きました。もし読み込みの部分で何か知見を頂けたらと思い、投稿させていただきました。
m.ts10806

2019/04/04 23:17

書いたようにしか動かないのがプログラムですが、それを動作させて確認しているのは人間なので「実は気のせいだった」ということはなくはないです。色々試して再現できなかったのであれば、いったん置いておき、進まれてはどうでしょうか。
moredeep

2019/04/05 00:31

「実は気のせいだった」に1票ですが、少なくとも、「コードの"どの箇所"で"どの値"が"どうなっていなければいけない"が、実際は"どうなっている"ためにおかしいと判断している」くらいは書かないと何が聞きたいかわからないです。 現状ではflipPiecesはバグってますね。くらいしか・・・
guest

回答2

0

ベストアンサー

console.log(board)で表示されるのは配列なのですが、開発者コンソール上では配列内のその値の評価まではやっていないようですね。
以下のように表示すればわかるかと思います。

var values = ""; for(var i = 0; i < board.length; i++) { for(var j = 0; j < board[i].length; j++) { values += board[i][j] + "," } values += "\n"; } console.log(values)

コメントを受け追記

イベント云々ではなくconsole.logか開発者コンソールの仕様だと思います。例えば下記を実行した場合、setTimeoutの中の処理が実行される前(10秒以内)に中身を確認すると先二つの値は[1,0]となっています。
しかしsetTimeoutの中の処理が実行された後に(10秒以上後)に"初めて"中身を確認すると、3つとも[1,1]になっています。(chromeで確認)

var test = [[0,0,0]]; console.log(test); test[0][0] = 1; console.log(test); setTimeout(function(){ test[0][1] = 1; console.log(test); }, 10000);

何かの仕様でこうなっているというような記述を見つけることが出来ませんでしたが、こうしないと巨大なデータをログ出力したらしょっちゅう固まるでしょうし、妥当なんじゃないかなと思います。

投稿2019/04/05 01:19

編集2019/04/05 02:53
moredeep

総合スコア1507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dounatsu

2019/04/05 01:36

配列の中身の評価は後回しにされるということでしょうか?つまり、今回の場合は8*8の配列だけ準備しておいて、その中身はクリックイベントの最後に入れられるといった感じでしょうか?
moredeep

2019/04/05 03:03

回答に追記しましたが、cosole.log(XXX)はあくまでもXXXのプロパティを表示してくれるものなんだと思います。XXXのプロパティがObject(or Array)の場合、さらに展開して中身を見せてくれるお役立ち機能はあるが、その展開した値は、展開したその瞬間の値であるという感じなんだと思います。
dounatsu

2019/04/05 07:16

ありがとうございます。理解できました。
guest

0

$(this).index();

が何をしたいのかわかりませんが、普通に上から処理されてますけど

javascript

1<script> 2$(function(){ 3 let a = 1; 4 let b = 2; 5 $('#id').on('click', function(){ 6 console.log(a); 7 //const c = $(this).index(); 8 const c = 3; 9 setA(b, c); 10 }); 11}); 12function setA(b,c){ 13 a = b + c; 14} 15</script> 16<input type="button" id="id" value="hoge">

投稿2019/04/05 00:34

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問