AJAX - AJAX Request Batching and Throttling Techniques

When building modern web applications, it is common to trigger multiple AJAX requests in a short period of time. For example, typing in a search box, scrolling a page, or interacting with filters can generate repeated server calls. If not controlled properly, this leads to excessive network traffic, server overload, slower performance, and poor user experience. AJAX request batching and throttling are two important techniques used to manage and optimize such scenarios.

1. Understanding the Problem

Consider a live search feature. Every time a user types a character, an AJAX request is sent to the server. If a user types quickly, this may result in dozens of requests within seconds. Many of these requests become unnecessary because only the final input matters.

Similarly, in applications with dashboards or analytics, multiple components may independently trigger API calls at the same time, leading to redundant or inefficient communication with the server.

To solve these problems, developers use batching and throttling techniques.

2. AJAX Request Batching

Definition

Batching is the process of combining multiple small AJAX requests into a single request and sending them together to the server.

How It Works

Instead of sending requests immediately, the application collects them over a short time window and groups them into one payload. The server processes all requests in a single call and returns a combined response.

Example Scenario

Imagine an application where multiple user actions trigger updates:

  • Update profile name

  • Update email

  • Update preferences

Instead of sending three separate AJAX requests, batching allows sending one request containing all updates.

Benefits

  • Reduces number of HTTP requests

  • Improves network efficiency

  • Lowers server load

  • Reduces latency overhead (headers, handshakes)

Implementation Approach

  1. Create a queue to store pending requests

  2. Use a short delay (for example, 100–300 ms) to collect requests

  3. Send a single combined request

  4. Distribute the response back to respective components

Example (Conceptual JavaScript)

let requestQueue = [];

function addToBatch(requestData) {
    requestQueue.push(requestData);

    if (requestQueue.length === 1) {
        setTimeout(sendBatch, 200);
    }
}

function sendBatch() {
    fetch('/batch-api', {
        method: 'POST',
        body: JSON.stringify(requestQueue)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Batch response:', data);
    });

    requestQueue = [];
}

3. Throttling

Definition

Throttling limits how frequently an AJAX request can be executed over a specific period of time.

How It Works

Instead of allowing unlimited requests, throttling ensures that only one request is sent within a defined time interval, regardless of how many times the triggering event occurs.

Example Scenario

In a scroll event:

  • Without throttling: dozens of AJAX calls per second

  • With throttling: one call every 500 milliseconds

Benefits

  • Prevents server overload

  • Reduces unnecessary API calls

  • Improves performance consistency

  • Ensures predictable request flow

Implementation Approach

  1. Define a time interval

  2. Allow the first request immediately

  3. Ignore subsequent triggers until the interval passes

Example (Conceptual JavaScript)

function throttle(func, limit) {
    let lastCall = 0;

    return function(...args) {
        const now = Date.now();

        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

const throttledRequest = throttle(() => {
    fetch('/api/data')
        .then(res => res.json())
        .then(data => console.log(data));
}, 500);

window.addEventListener('scroll', throttledRequest);

4. Difference Between Batching and Throttling

Batching focuses on combining multiple requests into one, while throttling focuses on limiting the rate of requests.

  • Batching reduces the number of requests by grouping them

  • Throttling reduces the frequency of requests over time

They can also be used together in complex applications.

5. Debouncing vs Throttling (Important Distinction)

Although related, debouncing is slightly different:

  • Debouncing delays execution until the user stops triggering events

  • Throttling ensures execution happens at regular intervals

Example:

  • Search input: use debouncing

  • Scroll tracking: use throttling

6. Real-World Use Cases

  • Live search suggestions

  • Auto-saving forms

  • Infinite scrolling

  • Analytics event tracking

  • Bulk updates in dashboards

7. Challenges and Considerations

  • Batching requires backend support to process grouped requests

  • Large batches may increase payload size

  • Throttling may delay critical updates if interval is too large

  • Proper error handling is needed for batched responses

  • Need to maintain mapping between requests and responses

8. Conclusion

AJAX request batching and throttling are essential optimization techniques in modern web applications. Batching minimizes the number of network calls by grouping requests, while throttling controls how often requests are sent. Together, they help improve performance, reduce server load, and create smoother user experiences, especially in applications with frequent user interactions or real-time data updates.