How to stop ajax loader

Question

I have this implemented:

$('#loader').hide()  // hide it initially
.ajaxStart(function() {
                        $('#loader').show();
                      })
.ajaxStop(function() {
                        $('#loader').hide();
                     });

And this is working perfectly when I'm using ajax method. But I want to be able to disable ajax loader in this circumstantecs.

    setInterval(function(){
      //I need to disable loader in here
    $.ajax({
            type: "POST",
            url: "live_top_5.php",
            dataType: 'json',
            cache: false,
            success: function(response) 
            {
                               //do something
            }
            });     
},10000);

Problem is that my loader is covering full screen and I want to disable it for this certain ajax call because I am refreshing this content every 10 sec. Is that possible? To disable ajax loader for the certain ajax call?

Answer 1

You have an option for that, check this additional note:

If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStart() method will not fire.

http://api.jquery.com/ajaxStart/

Edit: add the global parameter on the calls that shouldn't fire the event

   $.ajax({
            type: "POST",
            url: "live_top_5.php",
            dataType: 'json',
            cache: false,
            global: false,
            success: function(response) 
            {
                               //do something
            }
            });    

Answer 2

use this -

   setInterval(function(){
  setTimeout((function(){ $('#loader').hide();}),200);
$.ajax({
        type: "POST",
        url: "live_top_5.php",
        dataType: 'json',
        cache: false,
        success: function(response) 
        {
                           //do something
        }
        });     
},10000);

or you can use the flag in initialization

var allowed = true;
$('#loader').hide()  // hide it initially
.ajaxStart(function() {
                  if(allowed)  $('#loader').show();
                  })
.ajaxStop(function() {
                    $('#loader').hide();
                 });

and in ajax check for that

  setInterval(function(){
  allowed = false;
   $.ajax({
        type: "POST",
        url: "live_top_5.php",
        dataType: 'json',
        cache: false,
        success: function(response) 
        {
                 allowed = true;          //do something
        }
        });     
   },10000);