Pausing Javascript execution until button press

Question

I'm creating a visualization of a Sudoku creator for my Algorithms class (in Javascript). The algorithm works great, but I'm having trouble finding a way to pause execution.

Currently, I'm using prompt() to pause, but that's bulky and annoying. Is there any way to pause until another function is run (via HTML button) other than a continuous while loop?

I can post code, but I don't think it's needed. I'm not currently using jQuery, but I can if needed.

Answer 1

var flag = true;
function foo(){
    if (flag){
        // Do your magic here
        ...
        ...
        setTimeout(foo, 100);
    }
}

function stop(){
    flag = false;
}
<input type="button" onclick="stop();" value="stop it!!!" />

Live DEMO

Answer 2

If what you are trying to pause is a function which would otherwise keep looping, I've come up with a good solution:

HTML

<div id="stuff">Doing stuff</div>
<button id="pause">Pause/Resume</button>

JS

var paused = false;

document.getElementById('pause').addEventListener('click', function() {
  paused = !paused;
  if (!paused) {
    next();
  }
});

function doStuff() {
  // Do whatever you want here, then invoke next() for the next iteration of that function, for example:
  // (Note that the window.setTimeout is NOT part of the solution)
  window.setTimeout(function() {
    document.getElementById('stuff').append('.');
    next();
  }, 300);
}

function next() {
  if (!paused) {
    doStuff();
  }
}

doStuff();

CodePen: https://codepen.io/liranh85/pen/baVqzY?editors=1010