JavaScript似乎以错误的顺序执行代码
[英]JavaScript seems to be executing code in wrong order
问题描述
I have seen the oddest behavior from JavaScript and would love some insight into what is causing this. 
我已经从JavaScript看到了最奇怪的行为，并且希望对造成这种情况的原因有一些了解。 I made a little sudoku solver app (code below, also available to see at wellsjohnston.com/projects), and part of it features a board generator. 我制作了一个数独数独求解器应用程序（下面的代码，也可以在wellsjohnston.com/projects上找到），其中一部分具有板载生成器。 When you click 'generate board' or 'solve', jQuery is supposed to change the button to say "Creating Random Board..." or 'solving...'. 当您单击“生成板”或“解决”时，jQuery应该将按钮更改为“正在创建随机板...”或“正在解决...”。 However, when they are clicked, nothing happens. 但是，单击它们时，什么也不会发生。 You would think it was simply not working - but that is not the case. 您会认为这根本行不通-事实并非如此。 When I remove the code to change the button back (ie, removing $('.submit_sudoku_board').text('solve'), it all of a sudden works, and changes when clicked (but not back, of course). Does anyone have any idea what is going on?? 当我删除代码以将按钮改回来（即删除$（'。submit_sudoku_board'）。text（'solve'）时，它突然起作用，并且在单击时发生了变化（当然，不是单击回来）。有人知道发生了什么吗？
TL;DR:The code seems to be executing asynchronously. TL; DR：代码似乎异步执行。 While the solving/board generating recursive functions are running, the rest of the script executes. 在运行求解/生成董事会的递归函数时，脚本的其余部分将执行。 Why?? 为什么？？
Thank you! 谢谢！
EDIT: added HTML code as well. 编辑：也添加了HTML代码。 Sorry if it is ugly... 不好意思，不好意思...
$(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>
1 个解决方案
解决方案1
5 已采纳 2012-01-01 22:46:31
In most browsers, Javascript runs on the GUI thread. 在大多数浏览器中，Javascript在GUI线程上运行。 If your script is running, the GUI will not be updated until your function returns. 如果脚本正在运行，则在函数返回之前，GUI不会更新。
Allow the GUI to regain control and repaint with something like this, which delays doing the actual solve until after the GUI is updated: 允许GUI重新获得控制权并使用以下内容重新绘制，这会延迟进行实际求解，直到GUI更新之后：
$('.submit_sudoku_board').click(function(){
$('.submit_sudoku_board').text('Solving...');
window.setTimeout(function() {
sudoku();
$('.submit_sudoku_board').text('Solve');
}, 10);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript回调 - 以错误的顺序执行 - Javascript callback - executing in wrong order
Javascript：For循环似乎在执行代码之前拆分函数？ - Javascript: For loop seems to split function before executing code?
函数执行顺序错误 - Functions executing in wrong order
javascript函数执行顺序错误？ 关于异步的东西？ - javascript functions executing in wrong order? something about asyncronous?
从XML填充下拉列表-代码执行顺序错误 - Populate drop down from XML - code executing in wrong order
代码以错误的顺序执行并且它不是异步的（我认为......） - Code executing in wrong order and it isn't async (I think…)
javascript执行错误的功能 - javascript executing wrong function
JS-承诺执行顺序错误 - JS - Promises executing in the wrong order
Javascript代码执行混乱，可以解决吗？ - Javascript code executing out of order, can I fix it?
Javascript执行乱序 - Javascript executing out of order
相关标签