더블 요청

Question

이 스크롤

$(document).ready(function(){ 

     var tempScrollTop, currentScrollTop = 0; 
     $(document).scroll(function(){ 

     currentScrollTop = $(document).scrollTop(); 

     var ids = new Array(); 

    if (tempScrollTop < currentScrollTop) 
    { 
     var result = currentScrollTop % 100; 
     if(result == 0) 
     { 
      //console.log('scroll happened'); 
      var items = $(".item"); 
      var items_l = items.length; 
      for(var i = 0; i < items_l; i++) 
      { 
       ids[i] = parseInt(items[i].id.replace(/\D+/g,"")); 

      } 
      ids = ids.sort(); 

      var last_id = ids[0]; 
      $.ajax({ 
       url: "ajax/load", 
       type: "POST", 
       data: {last_id : last_id}, 
       success: function(res){ 

       $("#content").append(res); 

       } 
      }); 
     } 
    } 
    /*else if (tempScrollTop > currentScrollTop) 
    { 
     var result = currentScrollTop % 100; 
     if(result == 0) 
     { 
      $("#content").text("Вверх запрос " + result); 
     } 
    }*/ 

    tempScrollTop = currentScrollTop; 
    }) 


}); 

을 스크롤 할 때 요청을 호출하는 자바 스크립트이며,이 컨트롤러의 방법입니다 1) 때로는 2 개의 동일한 레코드를 출력하는 이중 요청을 방지 할 수 있습니까? 내가 아래로 스크롤했을 때

2) 레코드를 스크롤 할 때마다 100 픽셀이 추가되지만, 문제는 그것이 currentScrollTol % 100 == 0을 만들기가 어렵다는 것입니다. 어떻게하면 정상적으로 변경할 수 있습니까 ??

Answer 1

어떨까요?

var tempScrollTop, currentScrollTop = 0, isLoading = false; 
    $(document).scroll(function(){ 

[... 싹둑 ...]

 var last_id = ids[0]; 
    if (!isLoading) { 
     isLoading = true; 
     $.ajax({ 
      url: "ajax/load", 
      type: "POST", 
      data: {last_id : last_id}, 
      success: function(res){ 

      $("#content").append(res); 
      isLoading = false; 
      }, 
      error: function() { isLoading = false; } // just in case 
     }); 

[... 등 ...] 물론

이는 한 번에 한 가지를로드하게됩니다 만 최소한 그것은 당신의 UI를 잠그지 않을 것입니다.

또한 더 높은 범위 (부울과 비슷 함)에 last_id 값을 저장하고이를 사용하여 같은 것을 다시로드하지 않도록 할 수 있습니다. 두 방법 모두 결함이 있지만 귀하의 필요에 부응하십시오.

-M1

Answer 2

그래서 당신은 두 가지 문제가있다 : 당신은 때로는 100 % 상태가되었습니다

1) 당신은 항상 100 % 상태

2 때리지 마세요)를 두 번 이상

$(document).ready(function(){ 

     var tempScrollTop, currentScrollTop = 0; 
     var loaded = {}; 
     loaded[0] = true; //assuming the first piece comes loaded 
     $(document).scroll(function(){ 

      currentScrollTop = $(document).scrollTop(); 

      var ids = new Array(); 

      //this gives you a different int value for each 100 px section 
      //at 67px, you get 0, at 345px you get 3, etc 
      int section = Math.floor(currentScrollTop/100) 
      if(!loaded[section]) { 
       //prevents double request 
       loaded[section] = true; 
       var items = $(".item"); 
       var items_l = items.length; 
       for(var i = 0; i < items_l; i++) 
       { 
        ids[i] = parseInt(items[i].id.replace(/\D+/g,"")); 
       } 
       ids = ids.sort(); 

       var last_id = ids[0]; 
       $.ajax({ 
        url: "ajax/load", 
        type: "POST", 
        data: {last_id : last_id}, 
        success: function(res){ 
         $("#content").append(res); 
        } 
       }); 
      } 
     }); 
    }); 

것은 내가 아니라 그쪽을 참고합니다 :

내가 좋아하는 뭔가를 제안 브라우저를 스크롤 이벤트를 호출하지 않고 스크롤 한 지점까지 점프하여 해당 지점 위에있는 페이지를 생성하기 때문에 원본을 비롯하여 이러한 솔루션 중 일부는 약간 스크롤 한 다음 다시로드하면 몇 가지 문제가 발생합니다. 그러나 그것은 그 문제의 범위 밖입니다.