Interact with the DOM dynamically for every Ajax response without causing the user interface to freeze

Question

Interact with the DOM dynamically for every Ajax response without causing the user interface to freeze

I conduct a `for loop` for every request that is sent..

for (let k = 0; k <= 1000; k++) {
    $.ajax({
        url: `127.0.0.1/index?value=${k}`,
        method: `get`,
        beforeSend: function() {
            // any action..
        },
        success: function(response, status, xhr) {
            $('#response').append(response);
        }
    });
}

Nevertheless, as the for loop progresses from 0 to 1000 (this number may vary, it's just for illustrative purposes.) the user interface becomes unresponsive, and the responses to requests are not displayed in the DOM.

<div id="response"></div>

How can I improve this? Ideally, each ajax request should dynamically display the result in the response div (or synchronously)

Is there a straightforward solution that can help me achieve this?

javascript ajax performance

Answer 1

Answer №1

If you want to make individual ajax calls sequentially, you can use the following approach:

const fn = j => $.ajax({
  url: `//127.0.0.1/index?value=${j}`,
  method: `get`,
  beforeSend: function() {
    // perform any action..
  },
  success: function(response, status, xhr) {
    $('#response').append(response);
    if (j < 1000) {
      fn(j + 1);
    }
  }
});
fn(0);

By following this method, you ensure that the order of the results is maintained.

You can also modify the code to make multiple requests at a time, but ensuring result order may require additional changes.

Here is an alternative solution where you specify the starting index, ending index, and number of requests to be made simultaneously - with flexibility in result order:

const fn = async (index, max, count) => {
    const promises = [];
    for (i = 0; i < count; ++i) {
        promises.push($.ajax({
            url: `//127.0.0.1/index?value=${i+index}`,
            method: `get`,
            beforeSend: function() {
                // perform any action..
            },
            success: function(response, status, xhr) {
                $('#response').append(response);
            }
        }));
    }
    await promises;
    index += count;
    if (index <= max) {
        fn(index, max, Math.min(count, max + 1 - index));
    }
};
fn(0, 1000, 10);

Lastly, here's another variation that ensures the sequence of the results stays intact regardless of their return order:

const fn = async (index, max, count) => {
    const promises = [];
    for (i = 0; i < count; ++i) {
        promises.push($.ajax({
            url: `//127.0.0.1/index?value=${i+index}`,
            method: `get`,
            beforeSend: function() {
                // perform any action..
            }
        }));
    }
    const results = await promises;
    $('#response').append(results.join(''));
    index += count;
    if (index <= max) {
        fn(index, max, Math.min(count, max + 1 - index));
    }
};
fn(0, 1000, 10);

Answer 2

If you want to make individual ajax calls sequentially, you can use the following approach:

const fn = j => $.ajax({
  url: `//127.0.0.1/index?value=${j}`,
  method: `get`,
  beforeSend: function() {
    // perform any action..
  },
  success: function(response, status, xhr) {
    $('#response').append(response);
    if (j < 1000) {
      fn(j + 1);
    }
  }
});
fn(0);

By following this method, you ensure that the order of the results is maintained.

You can also modify the code to make multiple requests at a time, but ensuring result order may require additional changes.

Here is an alternative solution where you specify the starting index, ending index, and number of requests to be made simultaneously - with flexibility in result order:

const fn = async (index, max, count) => {
    const promises = [];
    for (i = 0; i < count; ++i) {
        promises.push($.ajax({
            url: `//127.0.0.1/index?value=${i+index}`,
            method: `get`,
            beforeSend: function() {
                // perform any action..
            },
            success: function(response, status, xhr) {
                $('#response').append(response);
            }
        }));
    }
    await promises;
    index += count;
    if (index <= max) {
        fn(index, max, Math.min(count, max + 1 - index));
    }
};
fn(0, 1000, 10);

Lastly, here's another variation that ensures the sequence of the results stays intact regardless of their return order:

const fn = async (index, max, count) => {
    const promises = [];
    for (i = 0; i < count; ++i) {
        promises.push($.ajax({
            url: `//127.0.0.1/index?value=${i+index}`,
            method: `get`,
            beforeSend: function() {
                // perform any action..
            }
        }));
    }
    const results = await promises;
    $('#response').append(results.join(''));
    index += count;
    if (index <= max) {
        fn(index, max, Math.min(count, max + 1 - index));
    }
};
fn(0, 1000, 10);

Interact with the DOM dynamically for every Ajax response without causing the user interface to freeze

I conduct a `for loop` for every request that is sent..

Answer №1

Similar questions

display the hidden box contents when clicking the button within a PHP loop

Using Ajax with MySQL can be quite time-consuming

Tips for identifying the extreme points (minimum and maximum) within a fluctuating interval

Dynamic Element with Mousewheel Event

Utilize CSS with dynamically created elements

Adding real-time value to AngularJS directives without triggering reassessment

An error popped up as I attempted to load an existing design within the vue-email-editor

Ensure that you include validation in the ajax request when loading the message content from a separate file

Nested function and the process of breaking out of the parent function

Discover an Element within a JSON Array and Append a New Value to it

Tips on employing useState within useEffect?

Error while compiling Q_PROPERTY

Updating the mat-icon in a row when a button is clicked

After retrieving a value from attr(), the object does not have the 'split' method available

By selecting "open in a new window" on an Ajax.ActionLink within an MVC partial view, the entire page can be refreshed

Retrieve selected value from HTML input with datalist and use it as an argument in a method

I am having trouble getting my AngularJS client to properly consume the RESTful call

Ways to swap webpack-dev-server for alternative servers such as express or apache

When the Bootstrap carousel slides, enhance the navbar text with motion blur effects

Saving the state of checkboxes in Angular Material

Interact with the DOM dynamically for every Ajax response without causing the user interface to freeze

I conduct a for loop for every request that is sent..

Answer №1

Similar questions

display the hidden box contents when clicking the button within a PHP loop

Using Ajax with MySQL can be quite time-consuming

Tips for identifying the extreme points (minimum and maximum) within a fluctuating interval

Dynamic Element with Mousewheel Event

Utilize CSS with dynamically created elements

Adding real-time value to AngularJS directives without triggering reassessment

An error popped up as I attempted to load an existing design within the vue-email-editor

Ensure that you include validation in the ajax request when loading the message content from a separate file

Nested function and the process of breaking out of the parent function

Discover an Element within a JSON Array and Append a New Value to it

Tips on employing useState within useEffect?

Error while compiling Q_PROPERTY

Updating the mat-icon in a row when a button is clicked

After retrieving a value from attr(), the object does not have the 'split' method available

By selecting "open in a new window" on an Ajax.ActionLink within an MVC partial view, the entire page can be refreshed

Retrieve selected value from HTML input with datalist and use it as an argument in a method

I am having trouble getting my AngularJS client to properly consume the RESTful call

Ways to swap webpack-dev-server for alternative servers such as express or apache

When the Bootstrap carousel slides, enhance the navbar text with motion blur effects

Saving the state of checkboxes in Angular Material

I conduct a `for loop` for every request that is sent..