중복 Ajax 제출을 중단 하시겠습니까?

Question

나는 JQuery와 및 Ajax를 사용하는 경우 duplciate 제출을 막을 수있는 최선의 방법이 무엇인지 궁금?

나는 두 가지 방법을 마련하지만, 요청이 완료 될 때까지이 아약스에서 [

2 만

1. 경우 확실하지 않은 모든 버튼을 비활성화 시작합니다. 내가 이걸로 볼 2 문제 jquery 모델 대화 상자를 사용하는 그래서 나는 그들이 얼마나 쉽게 그 버튼을 비활성화하는 것이 몰라 모르겠다. 두 번째로 요청이 중단되면 사용자는 모든 버튼을 사용할 수 없기 때문에 다시 시도 할 방법이 없습니다.

2. 내가 AjaxQueue라는 이름을 찾고 있는데, 필요한 경우 플러그인이 유지 관리를 위해 사이트를 방문한 이후로 어떻게 작동하는지 아무런 단서가 없습니다.

http://docs.jquery.com/AjaxQueue

나는 이것이 내가보고 있었는지의 오프 스핀 생각 편집.

http://www.protofunc.com/scripts/jquery/ajaxManager/

나는이 ajaxManager으로 볼 수있는 유일한 문제

내가 자신의 유형에 내 모든 $ .post, $ 갔지 및 $ 아약스 사람들을 변경해야 할 생각입니다.

하지만 $ 아약스에서 특별한 매개 변수를 필요로하는 경우 어떻게됩니까? 또는 사실 .post 및 .get을 사용하는 것이 좋습니다.

편집 2

나는 그것이 모든 $ 아약스 옵션에 걸릴 수 있다고 생각합니다. 나는 아직도 그것을 조사하고있다. 그러나 지금 내가 확신 할 수없는 것은 같은 옵션을 사용할 모든 요청에 ​​동일한 생성자를 사용할 수 있는가하는 것입니다.

First you have to construct/configure a new Ajaxmanager 
//create an ajaxmanager named someAjaxProfileName 
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', { 
    queue: true, 
    cacheResponse: true 
}); 

아니면 매번 위의 사항을 확인해야합니까? 응답이있을 때

Answer 1

어떻게 사용자가 버튼을 클릭 할 때 플래그를 설정하는 방법에 대한? Ajax 요청합니다 (success 및 error 콜백 후라고 complete에) 성공적으로 완료 될 때 당신은 깃발을 취소하며, 플래그가 설정되지 않은 경우에만 AJAX 요청을 보냅니다.

AJAX는 매우 좋은 jQuery Message Queuing라는 플러그인이 대기열에 관련. 나는 그것을 직접 사용했다.

var requestSent = false; 

jQuery("#buttonID").click(function() { 
    if(!requestSent) { 
     requestSent = true; 

     jQuery.ajax({ 
     url: "http://example.com", 
     ...., 
     timeout: timeoutValue, 
     complete: function() { 
      ... 
      requestSent = false; 
     }, 
     }); 
    } 
}); 

당신은 당신의 요청이 매달려 가능성이 있다고 생각하면 장기 실행 요청에 대한 시간 제한 값을 (값은 밀리 초 단위입니다)을 설정할 수 있습니다. 시간 초과가 발생하면 error 콜백이 호출 된 후 complete 콜백이 호출됩니다.

Answer 2

귀하는 다음 명확 변수에 활성 요청을 저장할 수 있습니다.

는

var request; // Stores the XMLHTTPRequest object 

$('#myButton').click(function() { 
    if(!request) { // Only send the AJAX request if there's no current request 

     request = $.ajax({ // Assign the XMLHTTPRequest object to the variable 
      url:..., 
      ..., 
      complete: function() { request = null } // Clear variable after response 
     }); 

    } 
}); 

편집 : 이것에 대해

하나 개 좋은 점은, 당신이 abort()를 사용하여 장기 실행 요청을 취소 할 수 있다는 것입니다.

var request; // Stores the XMLHTTPRequest object 
var timeout; // Stores timeout reference for long running requests 

$('#myButton').click(function() { 
    if(!request) { // Only send the AJAX request if there's no current request 

     request = $.ajax({ // Assign the XMLHTTPRequest object to the variable 
      url:..., 
      ..., 
      complete: function() { timeout = request = null } // Clear variables after response 
     }); 

     timeout = setTimeout(function() { 
         if(request) request.abort(); // abort request 
        }, 10000);       // after 10 seconds 

    } 
}); 

Answer 3

$.xhrPool = {}; 
$.xhrPool['hash'] = [] 
$.ajaxSetup({ 
    beforeSend: function(jqXHR,settings) { 
     var hash = settings.url+settings.data 
     if ($.xhrPool['hash'].indexOf(hash) === -1){ 
      jqXHR.url = settings.url; 
      jqXHR.data = settings.data; 
      $.xhrPool['hash'].push(hash); 
     }else{ 
      console.log('Duplicate request cancelled!'); 
      jqXHR.abort(); 
     } 
    }, 
    complete: function(jqXHR,settings) { 
     var hash = jqXHR.url+jqXHR.data 
      if (index > -1) { 
       $.xhrPool['hash'].splice(index, 1); 
      } 
     } 
    });