What to do with ajax forms multiple requests

Question

Let's say I have two links in my navigation which use Ajax.BeginForm with unobtrusive javascript in mvc4. First one makes one request to the database and the second one makes two requests thus taking twice as long. Let's say each request takes one second. Now the user clicks the second link and immediately after - the first link. A scheme of what happens in this order:

1. user clicks link 2
2. user clicks link 1
3. page is loaded for link 1
4. page is loaded for link 2

Let's say the user did this because he realized his mistake immediately after clicking. Now instead of the page 1 expected, he sees it for a split second and then again, he sees a page #2 even tho he didn't want to get to it completely.

First of all, is this a problem? If yes, are there examples on how it should be solved in the most appropriate way? Or maybe I am just chasing wind in the fields and should just forget it?

Answer 1

You should always abort previous AJAX call, when you are making a new one. It will help your server and give user a desired result.

var xhr;

function makeRequest() {
    if (xhr) 
        xhr.abort();

    xhr = $.ajax(...);
}

Answer 2

Perhaps you should look at disabling the links while the request it ongoing. Maybe just add a simple overlay on your page with a spinner to prevent the user from clicking the other link until the request is completed.

Answer 3

CSS

#loading{
position: absolute;
z-index: 99998;
top: 0px;
left: 0px;
width: 100%;
height: 1161px;
background-color: rgb(255, 255, 255);
opacity: 0.01;
background-position: initial initial;
background-repeat: initial initial;
}

HTML

  <div id="loading"></div>

Script

 $( document ).ajaxStart(function() {
      $( "#loading" ).show();
    });

$( document ).ajaxComplete(function( event,request, settings ) {
   $( "#loading" ).hide();
});