How to call a function asynchronously in Javascript so that we can handle its callback and stop its execution when the time is out?

Question

I have a function that solves a puzzle in a browser. It might take a very long time to finish and I want to stop its execution if the runtime exceeds 30 seconds. Something like this:

function solve(puzzle) {
    // A loop to solve a puzzle that might take minutes to run
    while (notSolve){
        keepFindingSolution(); // This is not a loop
    }
    return solution;
}

let solution = solve(veryHardPuzzle);
if (solution && solution.solved) {
    // Do something
}
console.log("Other executions");

So, I don't want to block the UI thread when solving the function so that users can still interact with the website. I also want to get the solution from the solve(veryHardPuzzle) once it's done, or break the execution of the function if the time is out.

I tried some different approaches below, but none of them work for me:

Wrap the solve() function in setTimeout()

setTimeout(function () {
    let solution = solve(veryHardPuzzle);
    if (solution && solution.solved) {
        // Do something
    }
}, 30000);
console.log("Other executions");

This approach (from https://stackoverflow.com/a/26616321/6308776) doesn't block the UI thread, and the other executions are executed happily. However, it just basically waits 30 seconds before executing the inner solve(veryHardPuzzle) function (please correct me if I'm wrong). If the solve(veryHardPuzzle) function runs longer than 30 seconds then it would block the thread.

clearTimeout() once the solve() is done

let timerId = setTimeout(function () {
    let solution = solve(veryHardPuzzle);
    clearTimeout(timerId);
    if (solution && solution.solved) {
        // Do something
    }
}, 30000);
console.log("Other executions");

I thought that this would stop the timeout() after the solution is found, but it technically waits 30 seconds before the solver(veryHardPuzzle) is executed.

After doing some research, I realized setTimeout() might not the thing I want. Do you have any ideas or techniques on how to solve this?

Answer 1

The easiest way to handle asynchronous (like) behavior is with a Promise.

In this case you could do something like this:

function doLongThing() {
  let success = false;
  return new Promise(function(resolve, reject) {

    //set timeout so if success is false after 30 seconds, reject promise.
    setTimeout(function () {
      if(!success) reject();
    }, 30000)

    //another set timeout to prevent blocking UX thread
    setTimeout(function () {
      //do long running thing
      let solution = solve(veryHardPuzzle);

      //thing finished
      success = true;

      //pass result into resolve method so consumer can use it
      resolve(solution);
    });
  })
}

then you could do this:

doLongThing().then(function(solution) {
  //do something with solution
}).catch(function() {
  //timed out
});

console.log("Other executions");

Answer 2

A few comments have hinted at this, but the answer is not in how you call solve, but rather in how solve iterates over each “try” (I’m assuming this is how your solver works). If after each try your solver will break out of the event loop (the essence of async JS), then the main thread will have opportunities to do the other work it needs to do like handle mouse clicks or paint the UI. There are a few ways to do this, but maybe Promises is the easiest to visualize and has the best browser support (though some polyfills may be necessary for some IE versions).

var timeIsUp = false

function trySolution (puzzle, solution) {
  return new Promise(function (resolve, reject) {
    if (!solution) reject('no solution found')

    if (timeIsUp) reject('time up!')

    if (puzzle + solution !== 'wrong') { // idk lol
      resolve({solution: solution, success: true})
    } else {
      resolve({solution: solution, success: false})
    }
  }
}

// solve is now recursive with each iteration async
function solve (puzzle, solutions) {
  trySolution(puzzle, solutions[0])
    .then(function (result) {
      if (result.success) {
        solve(puzzle, solutions.slice(1))
      }
    })
    .catch(function (err) {
      console.error(err)
    })
}

// do the deed
solve(puzzle, solutions) // puzzle is undefined error lol

setTimeout(function () {
  timeIsUp = true
}, 30000)