What is the best way to manage the maximum number of concurrent AJAX requests?

Question

What is the best way to manage the maximum number of concurrent AJAX requests?

I am currently working on an autocomplete search bar feature.

<input type="text" class="form-control" id="text" >

<script>
    $("input").keyup(function(){
        let key = $("input").val();

        $.ajax({
            url: '/search',
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify({key}),
            success: function(data){
                console.log("SUCCESS")
            }
        });
    });

</script>

As users input text into the search box, I aim to send each keystroke to the backend server for suggesting results. However, this quickly triggers the maximum of 6 concurrent AJAX requests. How can I address this issue?

javascript ajax express

Answer 1

Answer №1

Do you wish to a) halt any ongoing request once a new one is initiated:

let inProgress;
$("input").keyup(function(){
    let key = $("input").val();
    if (inProgress) {
        inProgress.abort();
    }
    inProgress = $.ajax({
        url: '/search',
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify({key}),
        success: function(data){
            console.log("SUCCESS")
        }
    });
});

and b) delay the requests, so it only triggers autocomplete after a brief pause in typing (e.g., 500ms after the last keyup event):

let inProgress;
let debounceTimer;
$("input").keyup(function(){
    let key = $("input").val();
    if (inProgress) {
        inProgress.abort();
    }
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }
    debounceTimer = setTimeout(() => {
        inProgress = $.ajax({
            url: '/search',
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify({key}),
            success: function(data){
                console.log("SUCCESS")
            }
        });
    }, 500);
});

Answer 2

Do you wish to a) halt any ongoing request once a new one is initiated:

let inProgress;
$("input").keyup(function(){
    let key = $("input").val();
    if (inProgress) {
        inProgress.abort();
    }
    inProgress = $.ajax({
        url: '/search',
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify({key}),
        success: function(data){
            console.log("SUCCESS")
        }
    });
});

and b) delay the requests, so it only triggers autocomplete after a brief pause in typing (e.g., 500ms after the last keyup event):

let inProgress;
let debounceTimer;
$("input").keyup(function(){
    let key = $("input").val();
    if (inProgress) {
        inProgress.abort();
    }
    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }
    debounceTimer = setTimeout(() => {
        inProgress = $.ajax({
            url: '/search',
            type: 'POST',
            contentType: "application/json",
            data: JSON.stringify({key}),
            success: function(data){
                console.log("SUCCESS")
            }
        });
    }, 500);
});

What is the best way to manage the maximum number of concurrent AJAX requests?

Answer №1

Similar questions

Ways to update a component's state by clicking a button located on a different component

Having trouble making an ajax request using Cordova?

jQuery code unable to alter the class of a div

Angular 2: Enhancing User Experience with Pop-up Dialogs

Discover how to efficiently load and display a JSON array or object using JavaScript

Data structures of advanced complexity within HTML data attributes

jQuery: changing the order of list elements with the eq method

Encountering an Unhandled Reference Issue while Using JavaScript and AJAX

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

The fading effects are not functioning as expected in the following code

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Issue found: React-Redux action is not being dispatched

Having difficulty updating an angular variable within a callback function

Guide to seamlessly integrating additional validation techniques into the Magento checkout process

What is the best way to leverage multiple random YouTube v3 API keys simultaneously?

Issues encountered with asp.net javascript function not executing

Is there a method to refresh the image in the template?

When attempting to ajax post JSON data, I received a null response as well

How can you interact between a parent's named controller and JavaScript files in AngularJS?