如何让我的程序在执行 javascript 中的函数之前等待 10 毫秒？

Question

我希望我的程序在执行“TryNumber”函数之前等待 10 毫秒。当我尝试使用 setTimeOut 时，我的代码似乎中断并输出所有的而不是解决数独问题。我希望它等待 10 毫秒的原因是因为我希望每次尝试新号码时都能在屏幕上看到它。

该程序在没有 setTimeOut 和没有异步函数的情况下工作。

async function SolveSudoku(sudoku, sudokuID) {
    let filledNumbers = GetFilledNumbers(sudoku);
    let number, i, j;
    let backtracked = [];
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            temp = '#sudoku' + i + j;
            sudokuID[i][j] = document.querySelector(temp);
        }
    }
    for (i = 0; i < 9; i++) {
        for (j = 0; j < 9; j++) {
            number = 0;
            while (filledNumbers[i][j] == false) {
                setTimeout(function () {
                    if (number < 9)
                        number++;
                    else {
                        sudoku[i][j] = 0;
                        backtracked = Backtrack(i, j, filledNumbers);
                        i = backtracked[0];
                        j = backtracked[1];
                        number = sudoku[i][j] + 1;
                    }

                    if (number <= 9 && TryNumber(sudoku, i, j, number)) {
                        sudoku[i][j] = number;
                        sudokuID[i][j].classList.remove("border-red");
                        sudokuID[i][j].classList.add("border-green");
                        break;
                    }
                    sudoku[i][j] = number;


                    sudokuID[i][j].textContent = number;
                    sudokuID[i][j].classList.add("border-red");
                }, 10);
                
                
            }
        }
    }
    return sudoku;
}

function TryNumber(sudoku, row, column, number) {
    let pos = [row, column];
    let box = GetBox(pos);
    for (let i = 0; i < 9; i++) {
        if ((number == sudoku[row][i] && i != column) || (number == sudoku[i][column] && i != row))
            return false;
    }
    for (let i = box[0] * 3; i < box[0] * 3 + 3; i++) {
        for (let j = box[1] * 3; j < box[1] * 3 + 3; j++) {
            if (number == sudoku[i][j] && (i != row || j != column))
                return false;
        }
    }
    return true;
}

function GetFilledNumbers(sudoku) {
    let filledNumbers = [[], [], [], [], [], [], [], [], []];
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            if (sudoku[i][j] != 0)
                filledNumbers[i][j] = true;
            else
                filledNumbers[i][j] = false;
        }
    }
    return filledNumbers;
}

function GetBox(pos) {
    let box = [];
    if (pos[0] / 3 < 1) {
        box[0] = 0;
    }
    else if (pos[0] / 3 < 2) {
        box[0] = 1;
    }
    else {
        box[0] = 2;
    }

    if (pos[1] / 3 < 1) {
        box[1] = 0;
    }
    else if (pos[1] / 3 < 2) {
        box[1] = 1;
    }
    else {
        box[1] = 2;
    }

    return box;
}

function Backtrack(row, column, filledNumbers) {
    do {
        if (column > 0) {
            column--;
        }
        else {
            column = 8;
            row--;
        }
    } while (filledNumbers[row][column]);
    return [row, column];
}

//main
const button = document.querySelector('#bt-test');
const button2 = document.querySelector('#bt-test2');

let temp;
let sudokuID = [[], [], [], [], [], [], [], [], []];
let sudoku = 
[
    [ 8, 0, 0, 0, 1, 0, 6, 0, 9 ],
    [ 0, 0, 1, 9, 7, 0, 0, 2, 0 ],
    [ 9, 4, 0, 8, 2, 6, 3, 0, 1 ],
    [ 0, 0, 4, 6, 0, 0, 0, 0, 0 ],
    [ 0, 9, 0, 0, 0, 0, 1, 6, 0 ],
    [ 5, 0, 6, 0, 3, 2, 9, 8, 0 ],
    [ 4, 0, 0, 0, 5, 8, 7, 1, 0 ],
    [ 6, 2, 0, 1, 0, 0, 5, 3, 0 ],
    [ 0, 5, 8, 0, 0, 7, 4, 0, 2 ]
    ];




button.addEventListener('click', function () {
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            temp = '#sudoku' + i + j;
            sudokuID[i][j] = document.querySelector(temp);
            sudokuID[i][j].textContent = sudoku[i][j];

        }
    }
})

button2.addEventListener('click', function () {
    solvedSudoku = SolveSudoku(sudoku, sudokuID);
    for (let i = 0; i < 9; i++) {
        for (let j = 0; j < 9; j++) {
            sudokuID[i][j].textContent = solvedSudoku[i][j];

        }
    }
})

Answer 1

您必须在此处创建一个开环，其中所有参数都在外部 - 我将根据您的代码给您一个示例，但您需要对其进行处理以使其成为最终版本。

<script>
    // global            
    i = 0; MaxI = 9;
    j = 0; MaxJ = 9;
    number = 0;
    itrnLoop = null;

    // --run this--
    function RunOpenLoop()
    {
        Init();
        itrnLoop = setInterval(TheOutLoop, 100);
    }

    // in case you need to run it again
    function Init() {
        i = 0; MaxI = 9;
        j = 0; MaxJ = 9;
        number = 0;
    }

    // here is the real loop
    function TheOutLoop()
    {
        // put here your logic
        console.log("i:" + i + " j:" + j + " number:" + number);

        if (number < 9)
            number++;

        // increase i,j until the end of them
        j++;
        if (j == MaxJ) {
            j = 0;
            i++;
        }

        if (i == MaxI) {
            // the end
            clearInterval(itrnLoop);
        }
    }
<script>

每行延迟100毫秒输出

i:0 j:0 number:0
i:0 j:1 number:1
i:0 j:2 number:2
i:0 j:3 number:3
i:0 j:4 number:4
i:0 j:5 number:5
i:0 j:6 number:6
i:0 j:7 number:7
i:0 j:8 number:8
i:1 j:0 number:9
i:1 j:1 number:9
i:1 j:2 number:9
i:1 j:3 number:9
i:1 j:4 number:9
i:1 j:5 number:9
i:1 j:6 number:9
i:1 j:7 number:9
i:1 j:8 number:9
i:2 j:0 number:9
i:2 j:1 number:9
i:2 j:2 number:9
i:2 j:3 number:9
i:2 j:4 number:9
i:2 j:5 number:9
i:2 j:6 number:9
i:2 j:7 number:9
i:2 j:8 number:9
i:3 j:0 number:9
i:3 j:1 number:9
i:3 j:2 number:9
i:3 j:3 number:9
i:3 j:4 number:9
i:3 j:5 number:9
i:3 j:6 number:9
i:3 j:7 number:9
i:3 j:8 number:9
i:4 j:0 number:9
i:4 j:1 number:9
i:4 j:2 number:9
i:4 j:3 number:9
i:4 j:4 number:9
i:4 j:5 number:9
i:4 j:6 number:9
i:4 j:7 number:9
i:4 j:8 number:9
i:5 j:0 number:9
i:5 j:1 number:9
i:5 j:2 number:9
i:5 j:3 number:9
i:5 j:4 number:9
i:5 j:5 number:9
i:5 j:6 number:9
i:5 j:7 number:9
i:5 j:8 number:9
i:6 j:0 number:9
i:6 j:1 number:9
i:6 j:2 number:9
i:6 j:3 number:9
i:6 j:4 number:9
i:6 j:5 number:9
i:6 j:6 number:9
i:6 j:7 number:9
i:6 j:8 number:9
i:7 j:0 number:9
i:7 j:1 number:9
i:7 j:2 number:9
i:7 j:3 number:9
i:7 j:4 number:9
i:7 j:5 number:9
i:7 j:6 number:9
i:7 j:7 number:9
i:7 j:8 number:9
i:8 j:0 number:9
i:8 j:1 number:9
i:8 j:2 number:9
i:8 j:3 number:9
i:8 j:4 number:9
i:8 j:5 number:9
i:8 j:6 number:9
i:8 j:7 number:9
i:8 j:8 number:9

如何让我的程序在执行 javascript 中的函数之前等待 10 毫秒？

How do I make my program wait 10ms before executing a function in javascript?

javascript

asp.net

settimeout