AJax Testing - Add a delay

Question

I'm trying to run some tests on some Ajax code we have written, now obviously when tested locally it runs very fast and is great. I need to enforce a delay of 3 seconds so that I can see that the loader is being displayed and the user experiance is good enough.

I have tried the following but recieve the error "Useless settimeout" any other suggestions to achieve this? Any browser plugins?

$('#formAddPost').submit(function() {


    //Load the values and check them
    var title = $(this).find('#Title');
    var description = $(this).find('#Description');
    var catId = $(this).find('#Categories');

    if (ValidateField(title) == false || ValidateField(description) == false) {
        $('.error-message').show();
        return false;
    }

    $('.error-message').hide();

    //Show the loading icon
    $('.add-post').hide();
    $('.add-post-loader').show();

    //Temp for testing - allows the showing to the loader icon
    setTimeout(MakeAJAXCall(title.val(), catId.val(), description.val()), 1500);


    return false;
});

function MakeAJAXCall(title, catId, description) {
    $.ajax({
        url: "/Message/CreatePost/",
        cache: false,
        type: "POST",
        data: ("title=" + title + "&description=" + description + "&categories=" + catId + "&ajax=1?"),
        dataType: "html",
        success: function(msg) {
            $('#TableMessageList').replaceWith(msg);
            $('.add-post-loader').hide();
            $('.add-post').show();
        }
    });
}

Answer 1

You might be able to do that using fiddler.

The examples scripts include some samples that pause the response.

Answer 2

As you're testing your page for a delay in the server response, can you put a delay in the server side code instead of client side?