Tag: abort

  • Abort all running ajax on click jQuery

    There may be times you want to stop ajax request on some event like on click, hover etc…

    In my case, I wanted to run an ajax on click, but I wanted to cancel all other ajax request to be stopped before my ajax. So after lots of finding I found one solution here.

    I used the last snippet because I didn’t get how I to use the above 2 snippets.

    Below is the code worked for me:

    $( document ).on( 'ready', function () {
    
    	var xhrQueue = []; 
    
    	$(document).ajaxSend(function(event,jqxhr,settings){
    	    xhrQueue.push(jqxhr); //alert(settings.url);
    	});
    
    	$(document).ajaxComplete(function(event,jqxhr,settings){
    	    var i;   
    	    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
    	        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    	    }
    	});
    
    	window.ajaxAbort = function (){  //alert("abortStart");
    	    var i=0;
    	    while(xhrQueue.length){ 
    	        xhrQueue[i++].abort(); //alert(i+":"+xhrQueue[i++]);
    	    }
    	};
    
    })
    

    Then I used ajaxAbort(); on my click event. And that’s it!!! All the previous ajax is stopped as shown in the video.