wcf 서비스가 두 번 호출됩니다.

Question

내 html 테이블에서 무한 스크롤을 사용하고 있습니다. 여기에 내가 무한 스크롤을 수행하는 데 사용하는 코드입니다

$('#divTable').bind('scroll', function() { 
     if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
      currentPageNo = currentPageNo + 1; 
      myservice(id, pageSize, currentPageNo); 


     } 
    }); 

내가 그것을 두 번이 코드 myservice(id, pageSize, currentPageNo);를 호출 테이블의 맨 아래에 아래로 스크롤하면 내가 100로 페이지 크기를 통과하기 때문에 페이지가로드가 100 개 개의 레코드 내 테이블을 채 웁니다

. 나는 왜 그 부름을 두 번하는지 이해하지 못한다. 여기

내 HTML

<div id="divTable" style="height: 535px;overflow-y: auto;overflow-x: hidden"> 
        <table> 
         <tbody data-bind="foreach: myData"> 

          <tr > 

           <td style="padding: 8px;width: 50px;" data-bind="text: Id "></td> 

      </tr> 

         </tbody> 
        </table> 

       </div> 

Answer 1

내가 내 사용자가 한 번에 한 페이지 씩 전진 할 수 있도록 스크롤 이벤트를 납치하고 그것을 사용하려고했던 비슷한 문제를 가지고있다 . 트랙 패드에서 이벤트 인터럽트가 너무 자주 발생하게하는 "인터 스티 얼 스크롤"이라고 부를 수 있습니다.

관성 스크롤을 식별하고 스크롤이 관성 스크롤이 아닌 경우 이벤트 핸들러 만 실행할 수 있어야합니다. 이벤트 핸들러 반응 여부를해야하는 경우 smartScroll.inertia의 값을 기반으로

var event = normalizeEvent(event); 
    if(event.timeStamp - smartScroll.timeStamp < 50){ 

    smartScroll.inertia = true; 
    }else{ 

    smartScroll.inertia = false; 
    } 

, 당신이 결정하는 것입니다 : 여기

는 코드입니다.

많은 사건에 관련되지 않는 여기가 있지만 당신은 여기에 전체 코드를 선택할 수 있습니다 : 여기 http://www.oliverpetkovski.com/javascript/main.js

Answer 2

이 허용하는 내 "스마트 스크롤"코드와 드래그 jQuery를 사용하여 완전한 답변입니다 스크롤바와 마우스 휠을 통해 레코드를 호출 할 수 있습니다.

https://github.com/maggiesavovska/knockoutEndlessScroll

참고 : 여전히 "intertial 스크롤"일어나고을 볼 경우, 당신은 마지막 스크롤 이벤트의 타임 스탬프 대 실제 이벤트 타임 스탬프 사이의 임계 값을 증가 라인 (99)에 if 문을 조정해야합니다. 이것은 스크롤이 실제이고 사용자 또는 관성에 의해 의도 된 것인지를 나타냅니다. 그림이 너무 높으면 스크롤을 시도 할 때 사용자가 고생하게됩니다. 너무 낮 으면 끝이없는 스크롤이 예기치 않게 진행됩니다. 또한 한방에서 관찰로 배열을 설정하고 정의 된대로 적절한 set 메소드를 사용하여 각 스크롤 이벤트에 대한 값을 설정 확인해야

if(event.timeStamp - smartScroll.timeStamp < 70) 

: 여기에 내가 말하는 겁니다 코드입니다 녹아웃.

http://knockoutjs.com/documentation/observables.html 내가 JS 파일에 데이터 객체를 생성 한 데이터에 대한 나의 smartScroll.scrollEvent

의 뷰 모델 라인 55에서 15 라인을 참조, 내가 무슨 말을 참조 할 서비스를 통합하면 나중에 삭제할 수 있습니다. 서비스를 사용하려면 코드에서 '// call service'라는 주석을 검색하십시오. 여기서는 서비스에 호출해야하며 코드에 이미있는 pageNumber 변수, 페이지 크기를 전달하고 배열을 반환해야합니다.

또한 데이터가 포함 된 배열의 전체 길이를 알아야합니다. 이렇게하면 드래그 가능한 스크롤 요소의 크기가 결정되며, 데이터의 끝 부분에있는 경우 스크롤 요소를 위 또는 아래에 놓습니다.model1.newArray.length라는 코드의 어디에서나 전체 데이터 배열의 길이를 제공해야합니다.

의견을 검색하고 '나중에 삭제 시작'을 선택하고 서비스를 통합하면 '나중에 삭제 완료'로 모든 항목을 삭제합니다.

model1.curArray는 세터를 사용하고 등호를 사용하지 말고 설정해야한다는 점에 유의하십시오. 이것이 현재 어떻게 그렇게 변하지 않았는지 확인하는 것입니다. 이것은 내가 의미하는 것입니다 : 올바른 (USING SETTER) : model1.curArray (model1.newArray [model1.pageNumber]); 올바르지 않은 (등호 사용) : model1.curArray = model1.newArray [model1.pageNumber];

일부 코드는 최적화 할 수 있습니다. 내가 주변에 도착하면, 나는 그것을 깨끗하게 할 것이지만 그것은 효과가있다.