How to lock thread in javascript energy efficient?

Question

I want to patch the alert object in the browser, to show additional text, but I need to await some data to show the necessary content in the alert. However, I can't postpone the alert call.

Also, I don't know about a way to close the alert and show another alert without a user action (if it exists, it can solve my problem too).

So, I have to await some data, but I can't break the alert behavior, which is blocking execution of the code.

To await a response, I can do something like this:

var start = performance.now();
while(true) {
  var time = performance.now() - start;
  if (time >= 3000) break;
}

console.log('done');

But instead of checking the timer, I will check some data.

This way should work, but this is terrible for performance, because it is the opposite to alert which is just freezing the thread and does nothing until the close dialog, and we'll load the CPU with useless work.

Is it possible freeze a thread to be more energy efficient?

I have to freeze the thread until I get some data from a worker.

Why is promise not solving your problem?

Promises is not blocking a main thread, so this is not reproducing the behavior of alert which I need.

The blocking thread is not user friendly and it's not that you need to await some data

I know about it, and this note is fair enough to development web pages and applications.

But this case is special. I develop a feature for a browser extension, to translate alerts. The browser extension must not modify the behavior of the page. So when a web site is calling alert, the thread must be freeze. The browser extension must not postpone an alert call to avoid unexpected behavior on the page.

You can see the feature explained here: Feat: Implement optional translation of alerts and console logs #102

Answer 1

The only way I can think of to "block" without consuming CPU this would be to make a synchronous XMLHttpRequest (which are deprecated because blocking is not user-friendly). You'll need to set up a server that can read the payload of the request and reply after the specified amount of time.

const xh = new XMLHttpRequest();
xh.open('GET', urlToYourServer, false);
xh.send('3');

where that '3' is the request body that the server parses (and responds after 3 seconds).

That said, you should not do this - it's a very inelegant and user-unfriendly approach. It'll stop any other action (including browser repainting and other requests) from occurring while this is going on. Better to properly wait for whatever you need (whether that's through a .then of a Promise, or a callback, or something else) - but without more context in the question, how exactly to accomplish this is unclear.