0
私はJavaScriptから奇妙な動作を見て、これを引き起こしていることについていくつかの洞察が大好きです。私は小さなsudokuソルバーアプリ（以下のコード、wellsjohnston.com/projectsで見ることができます）を作成し、その一部にボードジェネレータを搭載しています。 「ボードを生成する」または「解決する」をクリックすると、jQueryはボタンを「ランダムボードの作成...」または「解決する」と言うように変更することになっています。ただし、クリックすると何も起こりません。それは単純に機能していないと思うでしょうが、そうではありません。 $（ '。submit_sudoku_board'）。text（ 'solve'）を削除すると、そのボタンがすべて元に戻ってしまうというコードを削除すると、そのすべてが突然動作し、クリックされたときに変更されます。誰もがJavaScriptが間違った順序でコードを実行しているようです
TL ??に何が起こっているか任意のアイデアを持っている; DRは：コードは、非同期で実行しているように見える解決/ボードは、再帰関数を生成しながら実行している、スクリプトの残りの部分は実行なぜ??
。はありがとう
EDITを：！。同様にHTMLコードを追加して申し訳ありませんが、それは醜いであれば...
$(function(){
$('.submit_sudoku_board').click(function(){
$('.submit_sudoku_board').text('Solving...');
sudoku();
$('.submit_sudoku_board').text('Solve');
});
$('.clear_board').click(function(){
$('.board_input').val('');
});
$('.generate_board').click(function(){
$('.board_input').val('');
$('.generate_board').text('Creating Random Board...');
console.log('creating random board...')
generate_random_board();
console.log('------done creating board-----');
});
});
function sudoku()
{
var sudoku_board = new Array(9);
for(var i = 0; i < 9; i++){
sudoku_board[i] = new Array(9);
}
var cell, valid = true;
for(i = 0; i < 9; ++i)
{
for(var j = 0; j < 9; ++j)
{
cell = '#r' + i + 'c' + j;
if($(cell).val())
{
if(!($(cell).val() > 0 && $(cell).val() < 10))
{
$('.sudoku_message_box').text("Illegal characer found");
valid = false;
break;
}
sudoku_board[i][j] = ($(cell).val());
}else{
sudoku_board[i][j] = 0;
}
}
}
if(valid)
{
var start = new Date().getTime();
var solved = sudoku_solver(sudoku_board, 0, 0);
var end = new Date().getTime();
var solve_time = (end - start)/1000.0;
if(solved)
{
fill_board(sudoku_board);
$('.sudoku_message_box').text("Solve time: " + solve_time + " seconds");
$('.submit_sudoku_board)').text('Solve');
}else{
$('.sudoku_message_box').text("Sudoku puzzle not solvable");
}
}
}
function sudoku_solver(board, row, col){
if(row == 9)
{
return true;
}else if(col == 9)
{
return sudoku_solver(board, row + 1, 0);
}else if(board[row][col] != 0)
{
return sudoku_solver(board, row, col + 1);
}
for(var i = 1; i < 10; i++)
{
if(can_go(board, row, col, i))
{
board[row][col] = i;
if(sudoku_solver(board, row, col + 1))
{
return true;
}
}
}
board[row][col] = 0;
return false;
}
function can_go(board, row, col, val){
for(var i = 0; i < 9; i++)
{
if(board[row][i] == val || board[i][col] == val)
{
return false;
}
}
var subgrid_row;
var subgrid_col;
if(row < 3)
{
subgrid_row = 0;
}else if(row > 5)
{
subgrid_row = 6;
}else{
subgrid_row = 3;
}
if(col < 3)
{
subgrid_col = 0;
}else if(col > 5)
{
subgrid_col = 6;
}else{
subgrid_col = 3;
}
for(i = subgrid_row; i <= subgrid_row + 2; i++)
{
for(var j = subgrid_col; j <= subgrid_col + 2; j++)
{
if(board[i][j] == val)
{
return false;
}
}
}
return true;
}
function fill_board(board){
var cell;
for(i = 0; i < 9; ++i)
{
for(j = 0; j < 9; ++j)
{
if(board[i][j] != 0)
{
cell = '#r' + i + 'c' + j;
($(cell).val(board[i][j]));
}
}
}
}
function generate_random_board(){
var sudoku_board = new Array(9), dummy_board = new Array(9);
for(var i = 0; i < 9; i++){
sudoku_board[i] = new Array(9);
dummy_board[i] = new Array(9);
}
for(i = 0; i < 9; ++i)
{
for(var j = 0; j < 9; ++j)
{
sudoku_board[i][j] = 0;
dummy_board[i][j] = 0;
}
}
var random_range = Math.floor(Math.random()*10)+ 30;
for(i = 0; i < random_range; i++)
{
var random_x=Math.floor(Math.random()*8) + 1; // generate a random number 1-9
var random_y =Math.floor(Math.random()*8) + 1;
var random_val =Math.floor(Math.random()*8) + 1;
if(can_go(sudoku_board, random_x, random_y, random_val))
{
sudoku_board[random_x][random_y] = random_val;
dummy_board[random_x][random_y] = random_val;
}
}
console.log('solving test board');
var solvable = sudoku_solver(dummy_board, 0, 0);
console.log('iteration complete');
if(solvable)
{
console.log('found board');
$('.generate_board').text('Generate Solvable Board');
fill_board(sudoku_board);
}else{
console.log('board failed');
$('.generate_board').text('board not found');
$('.board_input').val('');
generate_random_board();
}
}
<div class="sudoku">
<div class="sudoku_title">
Sudoku Solver in JavaScript
</div>
<form style="position:relative; left:20%; top:25px;">
<table cellspacing=0 cellpadding=0 border=1 style="background-color:#FFFFFF;">
<!-- row 0 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" maxlength="1" type="text" id="r0c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r0c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r0c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r0c8" size="20" /></td>
</tr>
<!-- row 1 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r1c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r1c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r1c8" size="20" /></td>
</tr>
<!-- row 2 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r2c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r2c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r2c8" size="20" /></td>
</tr>
<!-- row 3 -->
<tr>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c0" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c1" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r3c2" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c3" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c4" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r3c5" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c6" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c7" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r3c8" size="20" /></td>
</tr>
<!-- row 4 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r4c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r4c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r4c8" size="20" /></td>
</tr>
<!-- row 5 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r5c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r5c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r5c8" size="20" /></td>
</tr>
<!-- row 6 -->
<tr>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c0" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c1" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r6c2" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c3" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c4" size="20" /></td>
<td class="board board_horizontal board_vertical"><input class ="board_input" maxlength="1" type="text" id="r6c5" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c6" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c7" size="20" /></td>
<td class="board board_horizontal"><input class ="board_input" maxlength="1" type="text" id="r6c8" size="20" /></td>
</tr>
<!-- row 7 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r7c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r7c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r7c8" size="20" /></td>
</tr>
<!-- row 8 -->
<tr>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c0" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c1" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r8c2" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c3" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c4" size="20" /></td>
<td class="board board_vertical"><input class ="board_input" maxlength="1" type="text" id="r8c5" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c6" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c7" size="20" /></td>
<td class="board"><input class ="board_input" maxlength="1" type="text" id="r8c8" size="20" /></td>
</tr>
<!-- end rows -->
</table>
</form>
<div class="sudoku_bottom">
<div class="submit_sudoku_board">
Solve
</div>
<div class="sudoku_message_box">
Enter a Sudoku puzzle into the board
</div>
</div>
<div class="clear_board">
Clear Board
</div>
<div class="generate_board">
Generate Solvable Board
</div>
</div>
は、あなたがダウンしている、まだショー最小限にこのコードを切断しようとしたことがあり"奇妙な"振る舞い？ –
あなたも使っているHTMLを表示できますか？デバッグに役立つでしょう。 – Rebecca
console.log（）をどこにでも追加して動作を確認しました。それらは順番に実行されますが、jQueryはコンソールメッセージと一致しません –