AJAX request time

Question

Well I make a request via AJAX, so I can put a load on the screen and remove it when AJAX loads the page.

The problem is that I need to make the load appear only if the request takes more than 2 seconds.

I’m doing like this:

$(document).ready(function () {
            $(".loading").show();
            $.ajax({
                url: 'APP?pagina=<?= $pagina ?>',
                success: function (response) {
                    $("#app").html(response);
                    $(".loading").hide();
                }
            });
        });

loading is the DIV that counts the loading, and it can only appear if the request takes more than 2 seconds.

Does anyone know how to do that?

Answer 1

You can use a combo with variable status and the setTimeout.

var showLoader = false;

$(document).ready(function () {
  var timeoutLoader = setTimeout(function () {
    showLoader = true;
    $(".loading").show();
  }, 2000); // 2000ms = 2 segundos

  $.ajax({
    url: 'APP?pagina=<?= $pagina ?>',
    success: function (response) {
      if (showLoader) {
        showLoader = false;
      } else {
        clearTimeout(timeoutLoader);
      }

      $(".loading").hide();
      $("#app").html(response);
    }
  });
});

1. You create a status variable for Loader, leaving her initially as false.
2. Before the AJAX call, a timeout 2 seconds and in case the time ends and the AJAX call is not finished, the Loader will appear.
3. When the call ends, it will check the status of the Loader through the variable showLoader, if it’s true, hides the Loader, if not, clean up the timeout, so that he does not execute and show the Loader.

There are other ways to do it, but this is one of them. A remark: 2 seconds is a short time, see if there really is a need for this in your AJAX call, see if it takes too long or is too fast.