1

Estoy aprendiendo javascript y he hecho un programa que resuelve un sudoku, el programa va bien pero quería hacer que se muestre paso a paso como se va solucionando. Por lo que cree la función necesaria para ir dandole el value a los input's en cada ciclo de la función recursiva. En si el problema que tengo es que no puedo hacer que haya una pausa entre cada ciclo, he probado setTimeout y otra funcion para dormir el programa, pero no hay caso, lo único que consigo es que demore mas en solucionarlo y luego escupa toda la solución completa. Mi pregunta seria: ¿Javascript no modifica el DOM hasta que toda la función termina de ejecutarse?¿Por mas que dentro de la función vaya modificando paso a paso? No encuentro otra explicacion, paso el trozo de codigo:

 function resolverSudoku(sudoku,row,col){
        if(row == 8 && col == 9){
            //mostrarResultado(sudoku);
            return true;
        }else{
            //No salir del rango
            if(col == 9){
                row++;
                col = 0;
            }
            //Ingresar los datos
            if(sudoku[row][col] != 0){ //Entrara por aca al detectar un numero que no se debe modificar
                if(resolverSudoku(sudoku,row,col+1)){
                    return true;
                }
            }else{
                for (var i = 1; i < 10; i++) {
                    //Reviso si el numero cumple las condiciones y si es asi lo ingreso
                    if(isColFree(sudoku,i,col) && isRowFree(sudoku,i,row) && isSquareFree(sudoku,i, row, col)){
                        sudoku[row][col]=i;
                        mostrarCasillas(sudoku,row,col); //muestra casilla a casilla (supuestamente)

                        ///////ACA HARIA LA PAUSA, O DENTRO DE LA FUNCION mostrarCasillas.

                            //Paso a la siguiente recursividad
                            if(resolverSudoku(sudoku,row,col+1)){ //retornara true solo cuando llegue al final de todos los ciclos
                                return true;
                            } // si retorna false, paso al siguiente valor del for                      
                            sudoku[row][col]= 0; //quito el valor que ya que no forma parte de la solucion
                        }                   
                    }//for

                }           

            //Si llega aca (no encontro i que entre) deberia retornar falso para volver al ciclo anterior
            return false;
        }//else
        return false;
    }//funcion

function mostrarCasillas(sudoku,row,col){       
        var m = (row+row*8)+col;
        casillas[m].setAttribute('value', sudoku[row][col]);
        sleep(1000);                
    }
La función resolver sudoku es llamada por un boton...             
4
  • veo que tienes una variable llamada casillas en qué momento la defines?
    – Sr1871
    Commented el 1 jun. 2020 a las 6:50
  • Perdon, solo he pasado una parte del codigo que resuelve el sudoku. Casillas la defino mucho antes, porque la uso para obtener la matriz que ingresan en la pagina web. Ademas que hago todas las verificaciones para que solo puedan ingresar numeros de 1 a 9. Commented el 1 jun. 2020 a las 6:56
  • deberías ponerla para ver que elemento del HTML estás usando
    – Sr1871
    Commented el 1 jun. 2020 a las 8:02
  • Estoy usando input type= text. Donde ingresa el usuario los numeros del sudoku a resolver. Commented el 1 jun. 2020 a las 20:38

1 respuesta 1

1

Puedes usar Promise y el patrón async/await.

Primero, definimos una función que vaya a esperar X millisegundos.

const delay = millis =>
    new Promise(resolve =>
        setTimeout(resolve, millis));

La función delay devolverá una Promise que se resuelva millis milisegundos después.

Declaramos la función como async y podemos "esperar" en cualquier punto dentro de ésta.

// Debemos declarar la función como
// async para poder usar await dentro de ésta
const solve = async (sudoku, cols, rows) => {
    // ...

    await delay(1000); // Esperamos 1 segundo (o el tiempo que quieras)

    // ...
}

Por último, es importante saber que como hemos delcarado la función como async, ahora devolverá implícitamente una Promise.
Esto es importante porque se trata de una función recursiva. Es decir, deberás hacer un await a cada llamada de solve (he renombrado tu función resolverSudoku a solve por conveniencia).

async function solve(sudoku, row, col) {
    // Haciendo el return no hace falta definir
    // el scope de else. Si la condición no es cierta
    // va a seguir con el código.
    if(row == 8 && col == 9)
        return true;

    if(col === 9) {
        row++;
        col = 0;
    }

    // En este caso, hacemos directamente el return de solve
    // En tu versión, si solve devuelve true, retornas true
    // Si no, se va al final de la función a devolver false.
    // Por tanto, retornando el resultado de solve es
    // exactamente lo mismo
    if(sudoku[row][col] !== 0)
        return await solve(sudoku, row, ++col);

    for (var i = 1; i < 10; i++) {
        const params = { sudoku, i, row, col };

        if(isValid(params)) {
            sudoku[row][col] = i;
            mostrarCasillas(sudoku,row,col);

            // Aquí la pausa de 1 sec (por ejemplo)
            await delay(1000);

            if(await solve(sudoku, row, ++col))
                return true;

            sudoku[row][col] = 0;
        }  
    }
}

const isValid = ({ sudoku, i, row, col }) =>
    isColFree(sudoku, i, col) && 
    isRowFree(sudoku, i, row) && 
    isSquareFree(sudoku, i, row, col)   

Me he permitido refactorizar un poco tu función para que se vea un poco más simple.
Lo importante al final es ver cómo se aplican los await tanto para las llamadas recursivas (a solve) como para la llamada a delay.

Y añadir que no hará falta el sleep dentro de la función mostrarCasillas.
Realmente, está más claro que la pausa se haga dentro en la misma función solve. mostrarCasillas sólo debería hacer eso, mostrar las casillas, y nada más. Puede inducir a confusiones, por lo que poner el delay en solve deja el código más claro.

Espero que sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.