AJAX 요청 집계/수집

Question

사용자가 확인란으로 표시된 여러 개의 필터를 사용하여 큰 데이터 집합 (표에 표시됨)을 조작 할 수있는 경우가 있습니다.

페이지가 AJAXed이므로 사용자가 필터를 클릭 할 때마다 전체 페이지 새로 고침을 기다릴 필요가 없습니다. 현재 구현되는 방식은 클릭 이벤트가 트리거 될 때 이벤트 핸들러가 모든 체크 박스를보고 서버에서 필터링 된 데이터를 요청하도록하는 것입니다.

잘 작동합니다. 그러나 이런 방식으로 수행하면 유용성이있는 & 성능 문제가 있습니다. 예를 들어 사용자가 6 개의 체크 박스를 클릭하면 6 개의 AJAX 요청이 트리거되고 다양한 간격으로 페이지가 6 번 업데이트됩니다. 이것은 아마도 사용자를 괴롭 히고 다소 비효율적 인 것처럼 보일 것입니다.

이벤트 처리기에 다음과 같이 일종의 시간 초과를 넣고 싶습니다. "더 이상 필터가 없으면 AJAX 요청을 트리거합니다." 그러나, 지금은 단지 6 초 모두 1 초 지연시킬 수있었습니다. 나는 1 AJAX 요청에 필터 정보를 집계/수집하는 방법을 모르겠다.

의견을 보내 주시면 대단히 감사하겠습니다.

Answer 1

"클릭"이벤트가 먼저 보류중인 타이머가 있는지 확인하십시오. 그렇다면 클릭이이를 취소하고 새 타이머를 시작해야합니다. 그런

(function() { 
    var timeout = null; 
    $('#yourForm').find('input:checkbox').click(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     doTheAjaxStuff(); 
    }, 500); 
    }); 
})(); 

뭔가 사용자가 0.5 초를 확인 상자 자신의 야생 열풍을 일시 정지 할 때까지 만들어진 어떤 AJAX 요청이 없을 것이라는 점을 의미한다. 사용자가 일시 중지되면 요청은 모두 체크 박스의 현재 상태를 전송하여 적절한 업데이트가 이루어질 수 있도록해야합니다. 이는 각 입력에 대해 별도의 AJAX 호출을 수행하지 않으므로 서버 작업의 작동 방식을 변경해야 할 수도 있음을 의미합니다.

Answer 2

당신은 단지 하나의 타이머가 시작됩니다 그래서, 첫 번째 클릭 이벤트에 플래그를 설정하여이 작업을 수행 할 수 있습니다 :

if (!ajaxRequestsPending) { 
    ajaxRequestsPending = true; 
    window.setTimeout(...); 
} 

실제로 플래그를 재설정 할 아약스 요청을 수행하는 코드입니다.

Answer 3

jQuery에는 사용자가 원하는 기능이 내장되어 있습니다. 페이지를 업데이트하기 위해 결과를 저장하는 경우에만 use $.ajaxStop(). 보류중인 요청이 없으면 마지막 요청이 완료된 후에 만 ​​발동됩니다. 연속해서 5 발사하면 그들은 모두 서로 위로 돌아옵니다. 이것은 한 번 불리는 데, 당신이 쫓고있는 것 같습니다.

Description of .ajaxStop()

:

Ajax 요청이 완료 될 때마다

, 다른 뛰어난 Ajax 요청이 있는지 jQuery를 확인합니다. 아무 것도 없으면 jQuery는 ajaxStop 이벤트를 트리거합니다. .ajaxStop() 메서드로 등록 된 모든 핸들러는이 시점에서 실행됩니다.당신의 아약스 통화에서

$(document).ajaxStop(function() { 
    $("#myPageElement").html($("#resultStore").html()); 
    $("#resultStore").empty(); //Cleanup 
}); 

을 :

당신은 다음과 같이 사용할 수 있습니다

$.ajax({ 
    //Existing stuff... 
    success: function(data) { 
    $("#resultStore").html(data); 
    }); 
}); 

그래서 모든 요청이 완료 정상적으로, 우리가 한 번 말에 내용을 업데이트, 확실하지 않은 방법을 훨씬 간단하게 :) 이것은 또한 요청이 실패한 경우 마지막으로 성공한 페이지를 업데이트하는 데 사용되는 이점이 있습니다.

Answer 4

먼저 - jQuery Grid 플러그인을 사용해보십시오 - 일부 항목은 클라이언트 측에서 정렬 가능합니다. 두 번째 - 어쩌면 요청 매개 변수를 전송하기 위해 "확인"버튼을 만들 수 있습니다!?