CODEWITHSUNDEEP
jquery
rahularyansharma
rahularyansharma

Reputation: 10755

stop further ajax call until previous call completed in window scroll event .

 $(document).ready(function() {
        $(window).on('scroll', function(e) {

                if (($(window).scrollTop()) >= $(document).height() - $(window).height()) {


                    $('#loader').show();
                    $('#LoadMore').hide();
                    var tl = $('.tlt').val();
                    var hdnCategoryId = $('.hdnCategoryId').val();
                    var hdnFilter = $("#<%= hdnFilter.ClientID%>").val();

                    $.ajax(
               {
                   type: "POST",
                   url: "http://example.com/product/subcategorydetail.aspx/GetProducts121",
                   data: "{t:" + tl + ",Id:" + hdnCategoryId + ",hdnFilter: '" + hdnFilter + "'}",
                   contentType: "application/json",
                   dataType: "json",
                   success: function(rsp) {

                       $('.wrapperDIV').append(rsp.d.outputString);

                       $('.tlt').val($('.wrapperDIV input.lastId').eq(-1).val());
                         alert($('.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();

                   }
               });

                }

            });
        });

I am using above code to load more products when user reaches at end of window using scroll. but the problem is its generating ajax request again and again . I am using last loaded product Id to get next set of products . so instead of getting every time different Ids of last product I get the same Id again and again if i scroll in fast manner but this works perfect if i scroll and wait for render first result set to be included in DOM .

Upvotes: 0

Views: 544

Answers (1)

tdragon
tdragon

Reputation: 3329

I would add some bool flag indicating whether loading products is in progress. You should check the flag as a first action in scroll handler. The flag should be set to true when you enter to the if statement, and reset to false on ajax complete handler.

Upvotes: 1

Related Questions