AJAX - Self-Executing Anonymous Function

Question

AJAX - Self-Executing Anonymous Function

I have a question that may seem trivial, but I want to make sure I'm heading in the right direction.

I've created two different versions of an XMLHttpRequest wrapper, and both are functioning correctly.

const httpRequest = function () {
    let xhr = new XMLHttpRequest();
    return function ( config = { url: '', method: 'GET', onLoadStart: null, onLoad: null, onProgress: null, onError: null, onAbort: null, onLoadEnd: null, onTimeout: null, timeout : null }) {

        xhr.open(config.method, config.url);
        xhr.onloadstart = config.onLoadStart;
        xhr.onload = config.onLoad;
        xhr.onprogress = config.onProgress;
        xhr.onerror = config.onError;
        xhr.onabort = config.onAbort;
        xhr.onloadend = config.onLoadEnd;
        xhr.ontimeout = config.onTimeout;
        xhr.timeout = config.timeout;
        return xhr;
    };
}();

and this one

function httpRequest(config = { url: '', method: 'GET', onLoadStart: null, onLoad: null, onProgress: null, onError: null, onAbort: null, onLoadEnd: null, onTimeout: null, timeout : null }) {
    var xhr = new XMLHttpRequest();

    xhr.open(config.method, config.url);
    xhr.onloadstart = config.onLoadStart;
    xhr.onload = config.onLoad;
    xhr.onprogress = config.onProgress;
    xhr.onerror = config.onError;
    xhr.onabort = config.onAbort;
    xhr.onloadend = config.onLoadEnd;
    xhr.ontimeout = config.onTimeout;
    xhr.timeout = config.timeout;

    return xhr;
}

I'm having trouble understanding why you would use an immediately-invoked Function Expression when a regular function works just as well? I'm hoping someone can provide some insight, as I've heard that for this type of scenario, an immediately invoked function is preferred.

javascript

Answer 1

Answer №1

The key distinction between the two methods lies in the timing of creating the XMLHttpRequest object.

In the first method, you invoke it in this manner:

h = httpRequest();
xhr1 = h({ ... });
xhr1.send(...);
xhr2 = h({ ... });
xhr2.send(...);

When calling httpRequest(), a single instance of XMLHttpRequest is created and shared between both xhr1 and xhr2.

This approach may lead to issues as assigning values to xhr2 will overwrite the properties of the original XMLHttpRequest object. Yet, if you can avoid invoking h() until the previous use is complete, it could help save some memory.

On the other hand, the second method involves directly calling httpRequest(), which generates a fresh XMLHttpRequest instance each time.

xhr1 = httpRequest({...});
xhr1.send(...);
xhr2 = httpRequest({...});
xhr2.send(...);

This technique is secure as there are no instances of overwriting involved.

If you modify the initial version by placing let xhr = new XMLHttpRequest(); at the start of the inner function, it will mirror the second technique while requiring slightly more verbosity when using it.

Answer 2

The key distinction between the two methods lies in the timing of creating the XMLHttpRequest object.

In the first method, you invoke it in this manner:

h = httpRequest();
xhr1 = h({ ... });
xhr1.send(...);
xhr2 = h({ ... });
xhr2.send(...);

When calling httpRequest(), a single instance of XMLHttpRequest is created and shared between both xhr1 and xhr2.

This approach may lead to issues as assigning values to xhr2 will overwrite the properties of the original XMLHttpRequest object. Yet, if you can avoid invoking h() until the previous use is complete, it could help save some memory.

On the other hand, the second method involves directly calling httpRequest(), which generates a fresh XMLHttpRequest instance each time.

xhr1 = httpRequest({...});
xhr1.send(...);
xhr2 = httpRequest({...});
xhr2.send(...);

This technique is secure as there are no instances of overwriting involved.

If you modify the initial version by placing let xhr = new XMLHttpRequest(); at the start of the inner function, it will mirror the second technique while requiring slightly more verbosity when using it.

AJAX - Self-Executing Anonymous Function

Answer №1

Similar questions

Constantly positioning the text cursor over the Textbox

Tips for accessing the current state/value in a third-party event handler?

What is the best way to retrieve attributes from a through table using a query?

The initial click event for the input element in Jquery is not functioning correctly

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

Implement the Bootstrap datetimepicker functionality for the specified div element

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

Is there a way to showcase the content of a text file in a sequential manner using Javascript/AJAX?

What causes the component to remount with every update to its state?

Picture is currently not showing up in the division

NextRouter does not have a property called "refresh"

Displaying Text and Images on a Sliding Carousel with a Static Background Image

When I attempted to run `npm start`, an error with status code 1 was thrown,

Passing Data to a Different Route in Vue.js

Struggling to properly parse JSON data using jQuery

Align audio and video elements in HTML5 using JavaScript

The functioning of JavaScript's ajax capabilities

Is it necessary to include @types/ before each dependency in react native?

This code is only functional on JSFiddle platform

What is the best way to pass multiple row values in a form field using AngularJS to a web API?