Infinite Scrolling به زبان ساده

من این روش رو به شکل مبتدیانه پیاده کردم اما خوب ایراداتی هست که فکر کنم با همفکری دوستان بتونم برطرفش کنم...

امدم با جاوا اسکریپت بررسی کردم که هر وقت اسکرول به انتها رسید یک ایجکس رو بخونه و محصولاتی که دریافت می کنه رو اضافه کنه ...

اما مشکلی که وجود داره این هست که وقتی محصولی وجود نداشته باشه این هر دفعه ای جکس رو ارسال می کنه و پاسخ می گیره در صورتی که توی این سایت اینطوری نیست و وقتی دفعه اول دید چیزی وجود نداره دیگه درخواست ایجکس ارسال نمی شه!

برای پیاده سازیش از کد زیر استفاده میکنیم که progress یه تابع هست برای نمایش progress و تابع getPage صفحات رو لود میکنه.

var pageIndex =<?=$pageIndex?>+1;
var inProgress = false;
$(function(){
  progress(false);
  $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
      if (!inProgress) {
        getPage();
        progress(true);
        inProgress = true;
      }
    }
  });
});

که در قسمت onsuccess باید کد زیر رو بنویسید

$('#main').append(data.html);
pageIndex += 1;
console.log(pageIndex);
inProgress = false;
progress(false);

اگر چیزی برای نمایش نبود  این کد رو اجرا نکنید:

inProgress = false;

دوستان سلام

من با استفاده از دو کد تونستم این مورد رو پیاده سازی کنم، اما یک مشکلاتی در کد ها دارم. به ترتیب کد ها رو قرار می دم و مشکلات رو در ادامه بیان می کنم.

کد 1:

$(function () {
 var win = $(window);
 var i =1;
 var isProgress = true;

 win.scroll(function() {
  if ($(document).height() - win.height() == win.scrollTop()) {
   $(function () {
    if(isProgress){
     $.ajax('/mypro/controller/method',{
      data:{
       index:i
      },
      type: 'POST',
      dataType:'json',
      success: function (data) {
       $('#listing-load').append(data.record).fadeIn();
       if(data.record ==""){
        isProgress = false;
       }
       i++;
      }
     })
    }
   });
  }
 });
});

این کد به صورت کاملا صحیح کار می کنه، تنها مشکلی که داره این هست که کاربر باید تا انتها(فوتر) اسکرول کنه! یعنی تا وقتی که به انتها اسکرول نکنه، موارد اجرا نمیشن....

کد 2 :

$(function () {
 var win = $(window);
 var i =1;
 var isProgress = true;

 win.scroll(function() {
  if (($(document).height() - win.height())-380 < win.scrollTop()) {
   $(function () {
    if(isProgress){
     $.ajax('/mypro/controller/method',{
      data:{
       index:i
      },
      type: 'POST',
      dataType:'json',
      success: function (data) {
       $('#listing-load').append(data.record).fadeIn();
       if(data.record ==""){
        isProgress = false;
       }
       i++;
      }
     })
    }
   });
  }
 });
});

این کد مشکل اسکرول رو برطرف می کنه، اما مشکلی که داره این هست که بدرستی کار نمی کنه! مشکل چیه؟

خوب وقتی من درخواست ها رو ارسال کردم دیدم گاهی اوقات چند تا درخواست مشابه با index مشابه ارسال می کنه! یعنی انگار به صورت یک دفعه یک درخواست رو چند بار ارسال می کنه....

اگر دقت کنید می بینید که بعد از ارسال هر درخواست مقدار i که همون ایندکس ما هست یک واحد افزایش پیدا می کنه...

یعنی یکبار ایندکس ما 1 هست، یکبار 2 و...

اما وقتی از این کد استفاده می کنم، چند بار موارد با ایندکس 1 ارسال میشه، چند مرتبه با ایندکس 2 و...

ممنون میشم کمکم کنید که بتونم به یک کد درست برسم...

اگه به یوتیوب یه سری بزنید فیلم‌های آموزشی خیلی خوبی پیدا می‌شه که قدم به قدم و خیلی ساده و روان توضیح دادن.

این فیلم آموزشی رو مشاهده کنید: قسمت اول، قسمت دوم، قسمت سوم و قسمت چهارم (که سرجمع ۱۵ دقیقه هم نمی‌شه)

یا این فیلم آموزشی