On any ajax calls made that take more than 2 seconds, I want a *loading* icon to appear. I have css that takes care of showing the loading icon when the 'loading' class is added to the body.

And here is the relevant code:

```
<script>
    var loadingIconOn = false;

    $(document).on({
        ajaxStart: function () {
            loadingIconOn = true;
            setTimeout(function () {
                if(loadingIconOn == true)
                    $('body').addClass("loading");
            }, 2000);

        },
        ajaxStop: function () {
            $('body').removeClass("loading");
            loadingIconOn = false;
        }
    });
</script>

```

This seems to be working fine, but I'm wondering if this might get me into trouble if multiple actions are made at the same time to do different ajax operations, and is there a better way of doing this?

EDIT (Here's why I want to wait 2 seconds):

There are actions that show immediate feedback, however the ajax call takes a split second to process. I don't want the user to see the loading symbol flicker on and off in cases like this. I only want to show it when something is actually taking a long time. No reason for them to feel like the site is slow when they wouldn't otherwise notice any slow down.