Question

I wanted to add a “loading” class to the body element on every ajax call that takes more than 300ms.
so I added the following script to my common.js file:

$(document).ready(function ()
{
    var timer;
    $("body").on({
        ajaxStart: function ()
        {
            var body = $(this)
            var timer = setTimeout(function ()
            {
                body.addClass("loading");
            }, 300)
        },
        ajaxStop: function ()
        {
            $(this).removeClass("loading");
            clearTimeout(timer);
        }
    });
});

Now this works if i make the ajax calls at leas 1sec long.
When they are immediate the loading class remains on the body element.

I suspect that the first the ajax call ends before 300ms expires that calls for removing the class and clearing the timer, lets say this takes 10ms, but then the timer the fires after 290ms more…

I wonder how could i test for that?
and weather I’m doing something wrong to achieve the described above task.

P.S
I’m using ASP.NET MVC.

Answer 1

You’re redeclaring the variable, loosing the higher scope of the previously declared variable:

$(document).ready(function () {
    var timer;
    $(document).on({
        ajaxStart: function () {
            var body = $(document.body);
            timer = setTimeout(function () { //don't use the "var" keyword
                body.addClass("loading");
            }, 300)
        },
        ajaxStop: function () {
            clearTimeout(timer);
            $(this).removeClass("loading");
        }
    });
});