Managing numerous inquiries from a single customer within a succession of brief intervals

Question

Managing numerous inquiries from a single customer within a succession of brief intervals

After creating a web application with a dashboard to showcase different reports and graphs based on user selections, I encountered an issue.

Users can interact with the reports using checkboxes and radio buttons. Every time a checkbox or radio button is selected, an ajax call is made to display the corresponding report.

The problem arises when users rapidly click on multiple checkboxes or radio buttons in quick succession. The server receives and responds to these requests in the same order they were sent, causing reports to overwrite each other almost instantly.

For instance, if there are two radio buttons - one for a pie chart and another for a line graph - and a user clicks on both rapidly, the pie chart will be displayed first but quickly replaced by the line graph.

Is there a way to prioritize the latest request over all earlier ones?

Important Points:

I aim to avoid continuous server hits while complying with the client's wish of not having a submit button.
It would be ideal to implement a javascript/ajax solution that only sends the most recent request to the server.
My technology stack includes Java/J2EE Struts2 framework, along with javascript and ajax.

java javascript ajax jakarta-ee request

Answer 1

Answer №1

Describe a time range, essentially a lengthened, handmade event-loop to group or transmit only the most recent request:

var timerID

function inputChangeHandler() {

  clearInterval(timerID)

  timerID = setTimeout(function() { 
    // transfer information to server
  }, 1000);

}

This is just one of various potential methods, in this instance the server will only accept data after a period of 1000ms has passed without any activity.

Answer 2

Describe a time range, essentially a lengthened, handmade event-loop to group or transmit only the most recent request:

var timerID

function inputChangeHandler() {

  clearInterval(timerID)

  timerID = setTimeout(function() { 
    // transfer information to server
  }, 1000);

}

This is just one of various potential methods, in this instance the server will only accept data after a period of 1000ms has passed without any activity.

Answer 3

Answer №2

There are two approaches to solving this issue that I believe are worth considering.

The first method involves introducing a slight delay, which has been suggested by other users.

Pros: Prevents the initial request from being sent, reducing server load.
Cons: Causes a delay in processing requests, leading to potential user wait times even for individual requests.

The second approach is to cancel the first request upon receiving a subsequent one.

Pros: Ensures real-time handling of requests.
Cons: Results in every request being sent to the server, potentially increasing server load.

Below is a code snippet that showcases how the second option could be implemented. It may require some adjustments as it's not tested extensively, but it captures the core concept:

var xhr = null; // tracks the current request

function sendRequest(){

    if(xhr && xhr.readyState != 4){
        // If a new request is made while another is still pending, abort the previous one
        xhr.abort(); 
    }

    xhr = $.ajax({
        .
        .
        . // Specify request parameters   
        done: function(data){
            // process the response data
        }
    });
}

Answer 4

There are two approaches to solving this issue that I believe are worth considering.

The first method involves introducing a slight delay, which has been suggested by other users.

Pros: Prevents the initial request from being sent, reducing server load.
Cons: Causes a delay in processing requests, leading to potential user wait times even for individual requests.

The second approach is to cancel the first request upon receiving a subsequent one.

Pros: Ensures real-time handling of requests.
Cons: Results in every request being sent to the server, potentially increasing server load.

Below is a code snippet that showcases how the second option could be implemented. It may require some adjustments as it's not tested extensively, but it captures the core concept:

var xhr = null; // tracks the current request

function sendRequest(){

    if(xhr && xhr.readyState != 4){
        // If a new request is made while another is still pending, abort the previous one
        xhr.abort(); 
    }

    xhr = $.ajax({
        .
        .
        . // Specify request parameters   
        done: function(data){
            // process the response data
        }
    });
}

Managing numerous inquiries from a single customer within a succession of brief intervals

Answer №1

Answer №2

Similar questions

Please consider opening in a new tab rather than a new window

Begin by introducing a fresh attribute to a JSON entity

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

`In NodeJS, facing a challenge with implementing a many-to-many relationship using Sequelize's

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Load HTML table values dynamically with Ajax post page load in PHP

Reduce the amount of time it takes for a Google AdWords Script to generate a

ERROR: Module 'jquery' not found in path 'C:....' when using Gulp and Browserify

Optimal Strategies for Handling CSRF Tokens with AJAX Requests in Laravel 9 and Beyond

A guide on executing multiple Post Requests in Node.js

Changes on services do not affect the Angular component

Having trouble retrieving the value of the hidden field using ng-model

Tips for retrieving the HTML file of a modified canvas in HTML5

The Xpath used to locate the newsfeed box on Facebook is malfunctioning

Angular's implementation of a web socket connection

The setInterval() function is not functioning properly when used with PHP's file_get_contents

Troubleshooting problem with Shopify mailto tag

Angular6 HttpClient: Unable to Inject Headers in Get Request for Chrome and IE11

Removing the Shadow from Material UI's Dialog Box

Use jQuery to remove an ID from an element using AJAX to interact with a database, then update