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:

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

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

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
        }
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving HTML array values using jQuery

Presented below is an array of input boxes. <form> 9 <input type="checkbox" name="date[]" value="9"> 10 <input type="checkbox" name="date[]" value="10"> 11 <input type="checkbox" name="date[]" value="11"> </form> The o ...

jqueryarraysajaxhtml

Guide on how to efficiently navigate and extract data from a (local) XML file using Prototype JS

I'm currently working on a project that already utilizes PrototypeJS and I need to develop a module for it. Here's what I have: - An XML file containing the necessary information Here's what I'm aiming for: - A basic div that showcase ...

javascriptxmljsonprototypejs

The length of the scope variable generates an error

var example = $scope.newgoal.gTitle; console.log(example.length); Even running this short code test, it throws an error message: TypeError: Cannot read property 'length' of undefined I've attempted to find various solutions without succes ...

javascriptangularjsionic-framework

Verify the solvability of a puzzle by converting an ArrayList to an array

I am looking to send my ArrayList: ArrayList<Tile> myList = new ArrayList<Tile>(); that, after: public void shuffleBoard() { Collections.shuffle(myList); for (int i = 0; i < SIZE; i++) { } switch (SIZE) { case 0: ...

javaarraysarraylist

Angular JS Array with N-level hierarchy

I am developing an application for questionnaires, where questions have responses that can lead to child questions with even more responses. This creates a hierarchical structure of multiple levels. I am looking for the best strategy to display this data i ...

javascriptarraysangularjs

Ways to dynamically retrieve a key value pair in JavaScript and React

I am currently working with a spreadsheet element where the cell values are stored in an object structure like this: localCells = {A1: {input: 'hi', value: 'world'}, A2: {input:'how', value:'you?'}} The object is q ...

javascriptarraysreactjsobjectkey-value

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Currently, I am passing three API calls to Promise.all. Each API call requires a separate error handler and data storage in its own corresponding object. If I pass test4 to Promise.all, how can I automatically generate its own error and store the data in ...

javascriptreactjstypescriptasync-awaites6-promise

Executing Javascript with Ajax requested data - A guide to making your script run smoothly

Battlefield Page In the graphic provided, there is a battlefield page featuring 20 users. To capture and store this data in a MySQL database, I have created a JavaScript script. However, an issue arises when trying to collect data from the next page after ...

javascriptajax

How come the 'color' property in the material-ui TextField functions properly, while the 'borderColor' property does not work as expected?

I am trying to show a TextField in orange color: <TextField id={field_meta.name} label={field_meta.title} defaultValue={field_meta.value? field_meta.value: ""} onChange={this.handleChange} margin="normal" inputProps={{style: {bo ...

javascriptmaterial-ui

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

javascriptphphtmldatabase

Node.js accepts JSON data sent via XMLHttpRequest

I have successfully implemented a post method using xmlhttprequest: var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log('Request finished. Pro ...

javascriptjsonnode.js

Exploring the retrieval of stored information from $localStorage within an AngularJS framework

I have been working on a MEAN app, and after a user successfully logs in, I want to save the returned user data in the localStorage of the browser for future use. I am using the ngStorage module for this purpose. Below is the code snippet from my LoginCont ...

javascriptangularjslocal-storagerootscope

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

I am facing an issue with filtering branchId from an Array. Here is the code snippet and steps I have taken. const [branchID,setBranchID]=React.useState([]); const tempTwo=[ { branchId: "61b25e0ae177d62ce4cb3b47", bra ...

javascriptarraysreactjsobject

Utilizing AngularJS to create a vertical calendar

Looking to create a vertical navigation displaying the date and day for the current week using angularjs. When clicking on the navigation div, I want an alert with the selected date to appear. I attempted this in Plunker using various templates, but was u ...

javascriptjqueryangularjstwitter-bootstrap

Set the RegEx so that the entire match is non-capturing

Recently, I've been working with a regex pattern that looks like this: const newRegex = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/; const finalResult = "1988-02-01 12:12:12".match(newRegex); console.log(finalR ...

javascriptregex

How can I fetch a nested object from Firestore and display it in a RecycleView on an Android app?

I am currently working on populating a RecyclerView in Android with attached image data structure, all within a single document. My goal is to display the name, district, and image for each unique ID without breaking it down into sub-collections. Is there ...

javaandroidandroid-recyclerviewgoogle-cloud-firestorestickyrecycleview

Using javascript to locate and substitute a word divided among multiple tags - a step-by-step guide

I need to utilize JavaScript to locate and substitute a word that has been separated into multiple tags. For instance, consider the following HTML code: <html> <body> <div id="page-container"> This is an apple. ...

javascripthtmlnode.js

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

javascriptphphtmljquerycss

Populating Recyclerview with data from a JSONObject containing a single string with various values

In my application, I am dealing with a `DataList` jsonArray that contains a jsonObject named `Data`. The string within the `Data` object consists of various values separated by the character "´". These values correspond to the keys in the "Headers" obje ...

javaandroidjsonandroid-recyclerview

How to update icon for fa-play using Javascript in HTML5

I recently added an autoplay audio feature to my website. I would like to implement the functionality to pause and play the music, while also toggling the icon to fa-play at the same time. This is the HTML code I am using: <script type="text/javascri ...

javascripthtml