9

I have been searching and this problem seems simple but cannot find answer. I have multiple request calling different url. But for each url, I only want the result once and it must be the last one in the same url being called. My issue now is "how to get the last one only?" I looked at this and it seems to be 3 years old:

http://plugins.jquery.com/project/ajaxqueue

Any other way to do this nicely and cleanly? If there is something like this, it would be perfect:

queue: "getuserprofile",
cancelExisting: true

(where the existing ajax in getuserprofile queue will be canceled)

Thanks

HP.
  • 19,226
  • 53
  • 154
  • 253

4 Answers4

10

This explains how to use jQuery to do an ajax call and how to abort it. All you need to do is create an array that stores each request. You could then cancel the previous request while adding the new one.

ajaxRequests = new Array();

queueRequest = function() {
    if(ajaxRequests[ajaxRequests.length - 1]) {
        ajaxRequests[ajaxRequests.length - 1].abort();
    }

    ajaxRequests[ajaxRequests.length] = //Insert New jQuery AJAX call here.
}
Jack Miller
  • 6,843
  • 3
  • 48
  • 66
Mr. Smith
  • 5,489
  • 11
  • 44
  • 60
5

Since we only want the result of the last request, this is very simple and works.

var ajax = null;
var getFoo = function() {
    if(ajax) ajax.abort();
    ajax= $.ajax({});
};
getFool();
getFool();
getFool();
getFool();
getFool();
getFool();

only the last request is executed.

khousuylong
  • 399
  • 2
  • 4
  • 12
1

Instead of using library, you can use Basic jquery Ajax method :

beforeSend:{}

For example:

xhr = jQuery.ajax({
            url: /*Your URL*/
            type: "POST",
            data: {
              //data
            },
             /* if there is a previous ajax request, then we abort it and then set xhr to null */
            beforeSend : function()    {           
                if(xhr != null) {
                    xhr.abort();
                }
            },
success:function(){}

});
Shubham Mathur
  • 119
  • 5
0

Yes it's posibble...

In general, I do not recommend stopping requests on the server side, there may be some problems that are hard to detect later.

The idea is to just check the status of a sent request and if necessary, just not send another one.

Here is an example

let activeRequest = false; //global var
let request = null;

        $(document).ready(function(){

            $('#user').keyup(function(){

                let query = $(this).val();

                    if (query != '') {

                        const xhr = new XMLHttpRequest();

                         if (activeRequest === false){
                        
                            activeRequest = true;



                        let request = $.ajax({
                            url: 'https://baconipsum.com/api/?type=all-meat',
                                method: "POST",
                                beforeSend: function(){
                                //Some code here
                            },
                            data: {
                                    "type": $(":radio:checked").val(),
                                    "tags": query,
                                    
                                },
                                success: function (data) {
                                    //Code if succes
                                    console.log('Request with val: ' + query);
                                },
                                 complete: function() {
                                    activeRequest = false;
                           }

                       });

                      if(!request){
                         console.log('Req does exist');
                         }
                            request.done(function(  ) {
                                activeRequest = false;
                                console.log('Done, Request Finish');
                                request = false;
                                
                            });


                        }else{
                            //If ajax still request abort it
                            console.log('Exiting Request - LastOne Still In que')
                            //request.abort();
                            activeRequest = true;
                            
                        }

                    } //End iF query != ''
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="user" id="user"  style="width: 200px;" placeholder="Enter User Name" />

It takes some work to customize it for you but I think it will help guide everyone for you.

//Edit I forgot, u can customize this code, for example add

 let value = $('#output').val();
value.slice(0,-1);

If the request is still pending... Or just another idea, just block the possibility of entering more characters, there are plenty of solutions

MartinQa
  • 1
  • 1