jQuery: AJAX response delay

When we develop an AJAX application we usually test it on our local web server first. However, this kind of test is not very reliable, because it doesn't take into account a possible delay that might occur when an AJAX transaction takes place. For testing purposes, it's useful to mimic such delay with our server-side language of choice. For example, here's a basic implementation in PHP:

header('Content-Type: text/plain');
sleep(3);
echo 'Request complete!';

The sleep() function delays the execution of our script by taking an integer (seconds) as its only argument. So our AJAX request will receive a response after 3 seconds. Done that, we can build up our jQuery code:

function addMarks() {
    var html = $('#loader').html();
    var mark = '>';
    $('#loader').html(html + ' ' + mark);
     window.setTimeout(addMarks, 1000);
   
}



$(document).ready(function() {

    $('#loader').hide();
    
    $('#response').ajaxStart(function() {
        $('#loader').show();
 addMarks();
    });
    
    $('#response').ajaxStop(function() {
        $('#loader').hide();
    });
    
    $('#run').click(function(e) {
    
        $.ajax({
     type: 'GET',
     url: 'delay.php',
     data: null,
     success: function(text) {
         $('#response').text(text);
  
     }
     
 });
 
 e.preventDefault();
    
    });

});

The addMarks() function has only a demonstrative purpose (you can use an AJAX spinner here) and simply adds a character to our AJAX loader after 1 second. So there will be three characters when our transaction is complete. Note that here we've used .ajaxStart() and .ajaxStop() for showing and hiding our loader. You can see this example here.