The readystatechange event of XMLHttpRequest triggers before the completion of the current script

Question

The readystatechange event of XMLHttpRequest triggers before the completion of the current script

Can someone explain why, in the code snippet below, line (a) triggers the 'readystatechange' event and logs this.readyState to the console before logging "ends" at line (b)? Shouldn't the callback be placed in the event queue and only executed after the main script finishes?

    const somePath = 'https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange';
    const xhr = new XMLHttpRequest();
    console.log(xhr.readyState); // This will output 0
    xhr.addEventListener('readystatechange', function() {
        console.log(this.readyState)
    }); 
    xhr.open('GET', somePath, true); // (a) Will output 1 to the console
    console.log('ends'); // (b)

javascript ajax

Answer 1

Answer №1

In this specific context, events are handled synchronously rather than asynchronously. When xhr.open is executed and the readystatechange event occurs, the code within the xhr will process attached listeners one by one in a synchronous manner.

The structure of the code can be visualized as follows:

const obj = (() => {
  const listeners = [];
  const addListener = fn => listeners.push(fn);
  const doSomething = () => {
    console.log('doing something');
    listeners.forEach(listener => listener());
  };
  return { addListener, doSomething };
})();
obj.addListener(() => console.log('listener running'));
obj.doSomething();
console.log('end of main thread');

Answer 2

In this specific context, events are handled synchronously rather than asynchronously. When xhr.open is executed and the readystatechange event occurs, the code within the xhr will process attached listeners one by one in a synchronous manner.

The structure of the code can be visualized as follows:

const obj = (() => {
  const listeners = [];
  const addListener = fn => listeners.push(fn);
  const doSomething = () => {
    console.log('doing something');
    listeners.forEach(listener => listener());
  };
  return { addListener, doSomething };
})();
obj.addListener(() => console.log('listener running'));
obj.doSomething();
console.log('end of main thread');

The readystatechange event of XMLHttpRequest triggers before the completion of the current script

Answer №1

Similar questions

How can I use a string argument in JavaScript to sort an array of objects by that specific value?

Simulation of documentElement language property in Jest

Explore Marker GeoCharts within AngularJS to enhance visualization capabilities

Callback function not being triggered in Jquery's getJson method

Encountered a snag with submitting data via AJAX: received an error message stating

Is there a way to update a single document in a MongoDB database using Mongoose without directly referencing the document?

Can you explain the distinction between the GenerateSW and InjectManifest choices within the vue ui pwd configuration?

Is it possible to apply the active class to the current list menu item in Mark using server-side techniques instead of client-side JS

What's the best way to ensure uniform spacing between the list items in this slider?

Tips for troubleshooting and resolving the npm ERR! code E404 issue in Vue.js when implementing a datepicker

What is the process for determining the remaining number of divs after deletion?

When multiple pages are open and one page remains idle, the user session will time out due to the timer implemented in JS/JQuery

When using nextjs, there is an issue that arises when attempting to define the property 'id' using context.params.id. This results in

How to sort Firebase real-time database by the child node with the highest number of

In JavaScript, it is not possible to retrieve the maximum or minimum value of an array

What is the best approach to store an array of Web Api data in a nested mongoose schema following a child-parent schema structure?

Decode PDF417 barcode images with ease using HTML and JavaScript on both desktop and mobile web browsers

Copy the AJAX response from a JQuery request to the clipboard seamlessly without requiring the user to manually click a button

The PHP function is not successfully receiving a value from the AJAX call to be entered into the Database

What's causing me to encounter two canvases while implementing PIXI.js in my Next.js project?