jquery - ウィンドウスクロールイベントで前の呼び出しが完了するまで、さらなる ajax 呼び出しを停止します。

Question

 $(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();

                   }
               });

                }

            });
        });

ユーザーがスクロールを使用してウィンドウの最後に到達したときに、上記のコードを使用してより多くの製品をロードしています。しかし、問題は ajax リクエストを何度も生成することです。次の商品セットを取得するために、最後に読み込まれた商品 ID を使用しています。したがって、最後の製品の毎回異なるIDを取得する代わりに、高速でスクロールすると同じIDを何度も取得しますが、スクロールして最初の結果セットをDOMに含めるのを待つと、これは完璧に機能します。