True thread blocking in javascript

Question

Background:

The following code demonstrates that the alert function blocks the operation of setTimeout:

// clock time
function now(){ return (new Date()).getTime() } 

var start = now(),
    elapsed_before_interruption

// This will interrupt the function below
setTimeout(function(){
    elapsed_before_interruption = now()-start   
    alert('Paused')
    start = now()
}, 2000)


setTimeout(function(){
  var elapsed_since_interruption = now() - start
  var elapsed = elapsed_since_interruption + elapsed_before_interruption

  // drop < 1/100s from display
  var t = Math.round(100 * elapsed / 1000)/ 100

  // Always finishes ~4 seconds after (i.e has been interrupted)
  alert( 'Elapsed time: ' + t 's' )

}, 4000)

fiddle

This makes for an excellent pause mechanism when I am choreographing various function calls based upon predetermined intervals.

My question:

Can this be done without calling alert?

EDIT Whilst similar to the following question: What is the JavaScript version of sleep()? the responses to that question predominantly make the assumption that the OP is dealing with a scheduling issue and suggest code restructuring. I would like to keep this question up as I am specifically not asking for advice on working with promises etc.

By means of explanation, I am writing single web pages (only my code) that are used to conduct timed response latency trials. There are many moving parts and I can implement pause by simply writing

function pause(){ alert('paused') }

I however have to introduce the ugly browser dialog. Anyway to avoid this?

Answer 1

The very short answer: Don't do it this way. If you need to control the order of async processes, there are a variety of better ways.

• For debugging, use the Chrome dev tools to set a breakpoint. Much easier.

• If you want to wait for something specific, approaches like Promises, callbacks, and libraries like async or queue are relatively easy to use and more flexible.

• If you want the syntactical simplicity of waiting in the middle of a function, try precompiling your code with babel and using the async/await syntax, which behaves in a similar way to what you have here (though you need to wait for something specific).

Note that none of these are "true thread blocking". There's only one thread in JS (unless you're using Workers or similar); you can block it with something like while(true) {}, but it locks everything in your browser window, including user interactions. You don't actually want that.