jQuery Bootgrid how to check if bootgrid is still loading

Question

I have implemented a jQuery Bootgrid. I want to manage showing and hiding my loader which I've implemented.

The loader is shown and hidden with $("#ajaxLoader").show(); and $("#ajaxLoader").hide();` respectively.

And I have my Bootgrid initialization implemented as follows:

var grid = $('#grid').on("load.rs.jquery.bootgrid", function () {
    $("#ajaxLoader").show();
}).bootgrid({
    ajax: true,
    ajaxSettings: {
        method: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false
    },
    searchSettings: {
        delay: 500,
    },
    url: myURL,
    rowCount: [5, 10, 50, 75, 100, 200, -1]
}).on("loaded.rs.jquery.bootgrid", function (e) {
   $("#ajaxLoader").hide();
});

Now this works fine but I want to optimize it in 2 ways:

1. Bootgrid's search functionality seems to have it's own loader so is there a way in order not show my ajax loader if the search is occurring?

2. My loader pops up and hides very quickly on short queries. Is there a way I can delay that happening?

Solving option 2 will probably solve option 1 on it's own but anyway here is what I've tried regarding option 2.

I tried setTimeout(function () { $("#ajaxLoader").show(); }, 1000);, however then it never gets hidden again. I counter solved that by using setTimeout(function () { $("#ajaxLoader").hide(); }, 1000) but then it flashes show and hide unnecessarily.

So ideally I need to check if the Bootgrid is still loading before I apply that function.

How can I solve my loading problem?

Edit:

I've also tried setting a loading variable where on my load method I say:

loading = true;
setTimeout(function () { if (loading) { $("#ajaxLoader").show(); }}, 1000);

and the following on my loaded event:

setTimeout(function () { $("#ajaxLoader").hide(); }, loaderDelay);

That still gave me the same flashing error.

Answer 1

I solved it using the clearTimeout() function like this:

var showLoader;

var grid = $('#grid').on("load.rs.jquery.bootgrid", function () {
    showLoader = setTimeout(function () { $("#ajaxLoader").show(); }, 1000);
}).bootgrid({
    ajax: true,
    ajaxSettings: {
        method: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false
    },
    searchSettings: {
        clearTimeout(showLoader);
        delay: 500,
    },
    url: myURL,
    rowCount: [5, 10, 50, 75, 100, 200, -1]
}).on("loaded.rs.jquery.bootgrid", function (e) {
   $("#ajaxLoader").hide();
});