Infinite Scroll 로딩 동작에 대해 작동하는 메서드 쿼리를 만드는 방법

Question

1000-3000 레코드 목록을 출력하는 페이지를 만듭니다. 현재의 흐름은 다음과 같습니다

1. 사용자는
2. jQuery를 모든 기록을 서버에 도달하고 페이지로를 주입 페이지를로드합니다.

문제는 여기에 일부 사용자의 기록은 끔찍한 UX 인 것을 반환하는 데 3 초 이상 걸릴 수 있다는 점입니다.

내가하고자하는 것은 다음과 같습니다. 1. 사용자가 페이지를로드합니다. 2. jQuery가 서버에 도달하여 최대 100 개의 레코드를 가져옵니다. 그런 다음로드 된 레코드가 최대 레코드와 같아 질 때까지 루프에서 서버를 계속 방문합니다.

아이디어는 사용자가 기록을 신속하게 확인하고 뭔가 문제가 있다고 생각하지 않습니다.

그래서 스크롤 위치는 신경 쓰지 않아도 무한한 스크롤이 아니지만 비슷한 흐름처럼 보입니다.

어떻게 jQuery에서 서버를 루프 할 수 있습니까? 그리고 레일에서 오프셋과 제한을 고려하여 쿼리 할 수 ​​있습니까?

는

Answer 1

당신은 단순히 반복해서 데이터의 일괄 처리를 위해 서버를 조회 할 수 있습니다 감사합니다.

구현할 수있는 API가 많이 있습니다. 마찬가지로 :

client: GET request /url/ 
server: { 
    data: [ ... ] 
    rest: resturl 
} 
client GET request resturl 
repeat. 

또는 클라이언트가 당신이 1-100, 다음 101-200 자원 및 루프에서이 작업을 수행 할 말 매개 변수를 전달할 수 있습니다. 이 글은 온다

모든 동안 당신은 데이터를 렌더링합니다.

귀하의 서버 중 하나는 내가 N + 난에 기록 할 말을 당신이 매개 변수를 전달할 수 있도록해야합니다.

또는 서버가 모든 데이터를 가져와야합니다. 어딘가에 저장 한 다음 데이터의 청크를 고유 한 ID 또는 URL과 함께 반환하여 다른 데이터 청크를 요청하고이를 반복합니다.

// pseudo jquery code 
function next(data) { 
    render(data.records); 
    $.when(getData(data.uniqueId)).then(next); 
} 

function getData(id) { 
    return $.ajax({ 
     type: "GET", 
     url: ... 
     data { 
      // when id is undefined get server to load all data 
      // when id is defined get server to send subset of data stored @ id. 
      id: id 
     }, 
     ... 
    }); 
} 

$.when(getData()).then(next);