What happens if an alert window is shown during an ajax call?

JavascriptAjaxSingle Threaded

Javascript Problem Overview


I was just wondering what could happen if, while an ajax call is being executed, an alert is prompted to the user, in the browser window.

Let's say, for example, that I have an ajax call

$.ajax({
    url: ...,
    type: GET/POST,
    ...
    success: function(data){
        console.log(data);
    },
    error: ...
});

that takes long time to complete (10 sec). While the call is executed, a simple javascript alert is thrown

alert("hello!");

What happens for example if:

  1. ajax call starts
  2. ajax call fetching data
  3. alert is shown
  4. ajax call returns data (alert window is still open!)

Knowing that JS is single threaded I know that the script execution will halt, I was just wondering what happens to the ajax call/response if the alert window is not closed "in time".

I hope I was clear enough and that this is not a "dummy" question. Thank you

Javascript Solutions


Solution 1 - Javascript

This isn't exactly hard to try and see... but the answer is that the alert will take priority and hold up the flow of execution.

Upon closing the alert, and assuming the AJAX request has completed while the alert was open, then the success function will be processed (or error function).

Note that the AJAX request will continue to run while the alert is shown (so a long running AJAX can process while the alert is open), but it is just that your script cannot continue handling the request until the alert is closed.

Here is a working example, notice that the data isn't written to the console until the alert is closed.

Another point to be aware of is that after the alert closes, the script will continue with the rest of the function (the code immediate after the alert) before the AJAX response is handled. This helps demonstrate what I mean

Solution 2 - Javascript

The HTTP request will continue to run and be processed in the background.

When the JS event loop becomes free, the readystatechange handler will fire.

Some intermediate ready states may be skipped because the event loop was busy while that state was true.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBeNdErRView Question on Stackoverflow
Solution 1 - JavascriptmusefanView Answer on Stackoverflow
Solution 2 - JavascriptQuentinView Answer on Stackoverflow