Page doesn't update while JavaScript is executing code

I'm working on a visualization for the Knight's tour problem. The algorithm I made works recursively. If I enable JavaScript, the page won't load (at least in Chrome). http://labs.pieterdedecker.be/knig开发者_如何转开发htstour/knightstour.htm

Why won't the page load? How can I fix this? I know my implementation probably isn't the most efficient way to calculate solutions, but I'm still in school and I haven't got the time and experience to come up with more efficient algorithms. I'm just doing it because the visualization of the problem is fascinating to watch.

If you're doing it recursively there is no point for the browser to update the UI. A way to implement the recursion and let the UI refresh could be to use setTimeout() and have a short timeout that would let the UI do something while the JS is idle.

this is the first thing that jumps out at me:

setTimeout(knightsTour(newX, newY, board, visitedFields), 10);

you are calling the method knightsTour immediately here, rather than after the timeout. setTimeout takes a function reference and a delay. you can fix your statement by wrapping the actual call in an anonymous method

// method to generate an function reference with properly scoped variables
var fnGenerator = function(newX, newY, board, visitedFields) {
    var wrapperFn = function() {
        knightsTour(newX, newY, board, visitedFields)
    };
    return wrapperFn;
}

// call the generator and return the wrapping function
var fnToCall = fnGenerator(newX, newY, board, visitedFields);

// Go from there
setTimeout(fnToCall, 10);

so we're generating a new function which wraps your actual call to knightsTour and provides the correct parameters. using a seperate function for this is necessary since you're trying to call all this in a loop if you didn't do this every call to knightsTour would use the same values for the parameters (see javascript closures).

after this your board will load and your sequence will start.

Web browsers pause the page loading while they execute inline scripts. You script is probably caught in an infinite loop.

You should wrap your code in a function, and call the function when the page loads (onLoad event).

EDIT

The OP has already made this change.

Your title explains the problem exactly. As long as the script is running, there is nothing else happening in the browser.

To see the progress of your script, you have to divide the process into small parts, so that you can execute one part of it and then return control to the browser long enough for it to display the result of that part.

You can use the window.timeOut method to return control to the browser and have the browser continue your code as soon as possible.

Example:

function workPart1() {
  // Do one part of the process here
  // Then let the browser update, and make it start part 2 after that:
  window.setTimeout(workPart2, 0);
}

If I understand your question correctly, you want to display the knight's moves visually on the webpage. If you execute your entire algorithm at once, all you will see is the final move after your code completes execution.

You need to modify your algorithm so that it maintains variables indicating the current state of the algorithm, and every time the function is called, it computes the next move. Then you can either use setTimeout with some delay or have the user click a button to advance to the next move.