リフレッシュ時に同一のクライアントAjaxリクエストを避ける

Question

ajaxリクエストが同一であるため、アボートやその他のアラートアクションが発生する可能性があるかどうかテストしたいと思いますか？

実際には、クライアントはいくつかのフォーム要素を介して要求を変更し、次に更新ボタンを押します。

私は、同じリクエストをキャッチする試みが貧弱です。タイマーのリフレッシュ機能を維持する必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

    var current_request_id = 0; 
    var currentRequest = null; 
    var lastSuccessfulRequest = null; 

    function refreshTable() { 
     $('#select').html('Loading'); 
     window.clearTimeout(timer); 

     //MY CATCH FOR DUPLICATE REQUEST NEEDS WORK 
     if (lastSuccessfulRequest == currentRequest) 
     { 
      //currentRequest.abort(); 
      alert('Duplicate query submitted. Please update query before resubmission.'); 
     } 

     var data = { 
      "hide_blanks": $("#hide_blanks").prop('checked'), 
      "hide_disabled": $("#hide_disabled").prop('checked'), 
     }; 

     json_data = JSON.stringify(data); 

     current_request_id++; 
     currentRequest = $.ajax({ 
      url: "/calendar_table", 
      method: "POST", 
      data: {'data': json_data}, 
      request_id: current_request_id, 
      beforeSend : function(){ 
       if(currentRequest != null) { 
        currentRequest.abort(); 
       } 
      }, 
      success: function(response) { 
       if (this.request_id == current_request_id) { 
        $("#job_table").html(response); 
        $("#error_panel").hide(); 
        setFixedTableHeader(); 
       } 
      }, 
      error: function(xhr) { 
       if (this.request_id == current_request_id) { 
        $("#error_panel").show().html("Error " + xhr.status + ": " + xhr.statusText + "<br/>" + xhr.responseText.replace(/(?:\r\n|\r|\n)/g, "<br/>")); 
       } 
      }, 
      complete: function(response) { 
       if (this.request_id == current_request_id) { 
        $("#select").html("Refresh"); 
        window.clearTimeout(timer); 
        stopRefreshTable(); 
        window.refreshTableTimer = window.setTimeout(refreshTable, 10000); 

        lastSuccessfulRequest = currentRequest; 
       } 
      } 
     }); 
    } 




    //TIMER STUFF TO refreshTable() 
    //THIS SECTION WORKS FINE 
    var startDate = new Date(); 
    var endDate = new Date(); 
    var timer = new Date(); 
    function startRefreshTable() { 
     if(!window.refreshTableTimer) { 
      window.refreshTableTimer = window.setTimeout(refreshTable, 0); 
     } 
    } 
    function stopRefreshTable() { 
     if(window.refreshTableTimer) { 
      self.clearTimeout(window.refreshTableTimer); 
     } 
     window.refreshTableTimer = null; 
    } 
    function resetActive(){ 
     clearTimeout(activityTimeout); 
     activityTimeout = setTimeout(inActive, 300000); 
     startRefreshTable(); 
    } 

    function inActive(){ 
     stopRefreshTable(); 
    } 
    var activityTimeout = setTimeout(inActive, 300000); 
    $(document).bind('mousemove click keypress', function(){resetActive()}); 

</script> 


<input type="checkbox" name="hide_disabled" id="hide_disabled" onchange="refreshTable()">Hide disabled task<br> 
<br><br> 
<button id="select" type="button" onclick="refreshTable();">Refresh</button> 

Answer 1

私は.ajaxSendと.ajaxSuccessグローバルハンドラの電源を使用すると思います。

ajaxSuccessを使用してキャッシュを保存し、ajaxSendが最初に読み取ろうとします。成功すると、リクエストの成功ハンドラがすぐにトリガされ、やり遂げようとしているリクエストが中止されます。それ以外の場合は...

私がここで実証したことは、あなたの問題に対する非常に単純で機能的なアプローチです。これは、変更することなく、あなたが持っているかもしれないすべてのAjax呼び出しに対してこの作業を行う利点があります。これを踏まえて、失敗を検討し、キャッシュヒットからのリクエストの中断がハンドラを中止するためにディスパッチされないようにする必要があります。

Answer 2

ここで有効なオプションは、オブジェクトをJSON.Stringify()にして文字列を比較することです。オブジェクトが同一である場合、結果の直列化された文字列は同一でなければなりません。

すでにJSON化された文字列をレスポンスから直接使用すると、若干の違いが生じる可能性があるため、テストによって再度チェックする必要があります。

また、ページの読み込みを超えて永続化する方法を理解しようとしている場合は、localStorage.setItem("lastSuccessfulRequest", lastSuccessfulRequest)とlocalStorage.getItem("lastSuccessfulRequest")を使用してください。 （そうでない場合は、私に知らせてください、私はこれを削除します）