クリックイベントで非同期ロード関数が繰り返し呼び出されるのを防ぐ

Question

私は一度に1ページのデータを読み込むコールバック関数を持っています。この関数は、前後のリンクをクリックすると呼び出され/トリガーされます。エンドユーザーが高速化した後、次のリンクをクリックして繰り返し、ロード機能を呼び出すと、アニメーションと負荷の問題が発生します。私はこれが非同期呼び出しであることを認識していますが、ロード/アニメーションをキューに入れるか一時停止する方法があり、他のロードが終了する前にあるロードが実行されていませんか？

むしろ

function NextPageNav_Click() { 
     var CurPage = parseInt($('#CurPage').attr('value').toString()) + 1; 
     $('#CurPage').attr('value', CurPage); 
     loadPage(CurPage, 'Next'); 
    } 


    function loadPage(CurPage, State) { 
     $.ajax({ 
      type: "POST", 
      url: "defaulttmp3.aspx/GetLatestProfiles", 
      cache: true, 
      async: false, 
      data: "{'PageIndex': " + CurPage + "}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 


       switch (State) { 

        case 'Previous': 
         $('<div id="nextitems"></div>').insertBefore('#curitems'); 
         $('#nextitems').empty(); 
         $('#nextitems').setTemplateURL('page/public/templates/profiletemplate.htm'); 
         $('#nextitems').processTemplate(msg); 
         $('#items').attr('style', 'left:-920px'); 
         $('#items').animate({ 
          "left": "+=920px" 
         }, 500, function() { 

          $('#curitems').remove(); 
          $('#nextitems').attr('id', 'curitems'); 
         } 

        ); 

         break; 

        case 'Next': 

         $('<div id="nextitems"></div>').insertAfter('#curitems'); 
         $('#nextitems').empty(); 
         $('#nextitems').setTemplateURL('page/public/templates/profiletemplate.htm'); 
         $('#nextitems').processTemplate(msg); 
         $('#items').animate({ 
          "left": "-=920px" 
         }, 500, function() { 
         $('#curitems').remove(); 
         $('#nextitems').attr('id', 'curitems'); 
         $('#items').attr('style', 'left:0'); 
         } 

        ); 
        break; 
        default: 
         $('#curitems').empty(); 
         $('#curitems').setTemplateURL('page/public/templates/profiletemplate.htm'); 
         $('#curitems').processTemplate(msg); 
         break; 

       } 


       var RowsReturned = parseInt(msg.d.RowsReturned.toString()); 
       var PageSize = parseInt(msg.d.PageSize.toString()); 
       initPrevNextLinks(RowsReturned, PageSize, CurPage); 



      }, 
      error: function (request, status, error) { 
       alert(request.statusText); 
      } 

     }); 
    } 

Answer 1

は、それが呼び出しごと

var throttleAsync(callback, time) { 
    var timeoutId = null; 
    return function() { 
      clearTimeout(timeoutId); 
      timoeoutId = setTimeout(callback, time || 1); 
    }; 
} 

---

EDIT

前のリセットクリックを絞るしてみてください、しかし、最初のクリックを使用する&は、その後のクリック

を無視

var throttleAsync(callback, time) { 
    var timeoutId = null; 
    return function() { 
      if(timeoutId == null) { 
       timoeoutId = setTimeout(function() { timeoutId = null; callback; }, time || 1); 
      } 
    }; 
} 

Answer 2

あなたは、次のいずれかを開始する前に、前のアニメーションを停止する場合は、あなたはので、このよう.stop() jQueryの機能を使用して行うことができます。.stop()制御するためのオプションが停止したアニメーションに何が起こるか

$('#items').stop(true, true).animate(...); 

が、もしあなたはちょうどそれが最後にジャンプして完了したい、おそらく.stop(true, true)がほしいと思う。

あなたの特定のケースでは、次のクリックが届くまでにまだ完了していないかもしれない待ち行列に入れられたajax呼び出しについておそらく心配する必要があります。その場合は、ajaxコールがフライト中であるかどうかを示すフラグを保持していてもかまいません。また、（here）のように現在の飛行中のAjaxコールを中止することもできます。

私はおそらく、Ajaxコールが既に進行中である間にボタンの押下を無視することをお勧めします。