Disable javascript function on successful ajax request

Question

To be specific, I want to disable a function from executing on successful ajax request. I do not know whether that's possible or if any workaround is there. Have a look at what I do:

<script>
$(document).ready(function() {
  function load(){
  ...
  ...
  }
});
$.ajax({
  ...
  success: function(option){
   disable load function // I want this functionality somehow
  }
});
</script>

Can someone help? I need this because load function is a scrolling function which loads products on scrolling to end & on ajax request another file uses the same, so somehow I need this function disabled. Any help will be appreciated.

EDIT

I want this function working on first time page load but with a successful ajax request I want this function be stopped. I'm putting the whole code for you to get the clear idea.

<script>
$(document).ready(function() {
var track_load = 0;
var loading  = false;
var total_groups = <?php echo $total_groups; ?>;
var cat_id= <?php echo $cat_id; ?>;
$('.autoload').load("xyz.php", {'group_no':track_load, 'cat_id':cat_id}, function() {track_load++;});

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height())
    {
        if(track_load <= total_groups && loading==false)
        {
            loading = true; //prevent further ajax loading
            $('.animation_image').show();

            $.post('xyz.php',{'group_no': track_load, 'cat_id':cat_id}, function(data){

                $(".autoload").append(data);

                $('.animation_image').hide();

                track_load++;
                loading = false; 

            }).fail(function(xhr, ajaxOptions, thrownError) { 
                $('.animation_image').hide();
                loading = false;

            });

        }
    }
});
});
</script>
<script>
$(document).ready(function(){
$('#subcat').change(function(){
    var val=$(this).val();
    $(this).value= val;
    $('#furcat').show();
    if(val=='A'){
        $('#furcat').html("<option selected='true' disabled='disabled'>Choose Further Category</option><option>B</option><option>C</option>");
        var sub_cat=41;
    }
    $('.autoload').empty();
    $('.animation_image').show();
    $.ajax({
        type: "POST",
        url: "abc.php",
        data: {sub_cat:sub_cat},
        success: function(option){
            $('.autoload').replaceWith(option);
            $('.animation_image').hide();
        }
    });
});
});
</script>

And as I need the same scrolling function in upcoming data, I'm involving another php file which uses the same code as this & to remove double ajax request I need to disable this function.

Answer 1

you can simply add the logic of flag variable. which will make sure that your load method will not execute after ajax success.

<script>

$(document).ready(function() {
  var flag=false;
  function load(){
   if(!flag){
   ...
   ...
   }
  }
});
$.ajax({
  ...
  success: function(option){
   flag=true;
  }
});
</script>

hope this helps you

Answer 2

You can create flag which you can set to 'true' on Document Ready and then set it to 'false' after successful ajax call.

<script>
var flag=true;
$(document).ready(function() {
  flag = true;
  function load(){
   if(flag){
   ...
   ...
   }
  }
});
$.ajax({
  ...
  success: function(option){
   flag=false;
  }
});
</script>

Answer 3

You don't need any if-statements and additional variables.

Look at this code:

var load = function () {
    ...
};
$( document ).ready(function() {
    $.ajax({
        ...
        success: function () {
            //"delete" the `load` function
            load = '';
        }
    });
});

The load function is stored into a variable and when the ajax request was successful, that variable is cleared.