Кажется, JavaScript выполняет код в неправильном порядке

Question

Я видел странное поведение JavaScript и хотел бы узнать, что является причиной этого.Я сделал небольшое приложение для решения судоку (см. Код ниже, который также можно увидеть на wellsjohnston.com/projects), и часть его содержит генератор плат.Когда вы нажимаете «создать доску» или «решить», jQuery должен сменить кнопку на «Создание случайной доски ...» или «решение ...».Однако, когда они нажимаются, ничего не происходит.Вы могли бы подумать, что это просто не работает - но это не так.Когда я удаляю код для изменения кнопки назад (т. Е. Удаляя $ ('. Submit_sudoku_board'). Text ('solve'), он внезапно работает и изменяется при нажатии (но не назад, конечно).Кто-нибудь имеет какое-либо представление о том, что происходит ??

TL; DR: Кажется, что код выполняется асинхронно. Во время выполнения рекурсивных функций решения / создания платы выполняется остальная часть сценария. Почему ??

Спасибо!

РЕДАКТИРОВАТЬ: также добавил 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>

Answer 1

В большинстве браузеров Javascript работает в потоке GUI.Если ваш скрипт работает, графический интерфейс не будет обновляться до тех пор, пока ваша функция не вернется.

Разрешите графическому интерфейсу восстановить управление и перекрасить что-то подобное, что задерживает выполнение фактического решения до тех пор, пока графический интерфейс не будет обновлен:

$('.submit_sudoku_board').click(function(){
    $('.submit_sudoku_board').text('Solving...');
    window.setTimeout(function() {
        sudoku();
        $('.submit_sudoku_board').text('Solve');
    }, 10);
});