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

こんにちは。表題の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

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はバグってますね。くらいしか・・・

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

回答2件

ベストアンサー

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

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

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

$(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">