jquery - How to stop call scroll function to call ajax when there is no more record

Question

I am using following code to load products when user reaches at page load and its working OK for me . but the issue is when there is no more product and user scroll up and down again . Its again call ajax function. I want to stop that call, means once all prodcut loaded then there should be no more ajax call.

 $(window).on('scroll', function() {

                if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
                    $('#loader').show();
                    var tl = $('.tlt').val();
                    var hdnCategoryId = $('.hdnCategoryId').val();
                    alert(tl);
                    $.ajax(
                   {
                       type: "POST",
                       url: "http://localhost/r/subcategorydetail.aspx/GetProducts121",
                       data: "{t:" + tl + ",Id:" + hdnCategoryId + "}",
                       contentType: "application/json",
                       dataType: "json",
                       success: function(rsp) {
                           $('.wrapperDIV').append(rsp.d.outputString);

                           $('.tlt').val($('.wrapperDIV input.lastId').eq(-1).val());

                       },
                       error: function(rsp) {
                           alert("error");
                           //alert(rsp.status + " " + rsp.statusText + "</br>" + rsp.responseText);
                           console.log(rsp);
                           console.log(rsp.responseText);

                       },
                       complete: function() {
                           $('#loader').hide();
                       }
                   });
                }
            });

Answer 1

Maintain Flag. when ajax call then take a varible and assign a value to it like -false. and after call complete assing a value it - true.

and every time when you ajax call just chekc the value of falg if it is true than call other wise not.

like..

           var flag=true;
           $(window).on('scroll', function() {
            if(flag)
            {
                flag=false;
                if ($(window).scrollTop() == ($(document).height() - $(window).height())) {

                $.ajax(
               {
               },
                   complete: function() {
                       flag=true;

                   }
               });
            }
         }
        });