防止在點擊事件中重複調用異步加載函數

我有一個回調函數一次加載一頁數據。當單擊後退和下一個鏈接時，該功能被調用/觸發。當最終用戶快速完成後續點擊下一個鏈接並重復調用加載函數時，我會遇到動畫和加載完成問題。我意識到這是一個異步調用，但有沒有辦法排隊或暫停加載/動畫，以便一個加載不會在另一個加載完成之前運行？防止在點擊事件中重複調用異步加載函數

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); 
      } 

     }); 
    }

來源

2012-01-16 Adeveloper123

而是儘量節流點擊

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

編輯

以前的重置它每次通話，但使用的第一個點擊&忽略隨後點擊

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

來源

2012-01-16 03:13:09 Skyrim

如果你想在開始下一個之前停止以前的動畫，你可以這樣做使用.stop() jQuery的功能是這樣的：

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

爲.stop()控制會發生什麼情況停止動畫的選項，但如果你只是想讓它跳到最後並完成，你可能想要.stop(true, true)。

在您的特定情況下，您可能還需要擔心在下次點擊來臨之前可能尚未完成的排隊的ajax調用。在這種情況下，您可以保留ajax呼叫是否正在運行的標誌，並忽略通過此時發生的任何咔嗒聲，也可以使用.abort()來中止當前正在進行的ajax呼叫，如here所示。

我可能會建議只是忽略任何按鈕，而ajax調用已經在進行中，因爲更快的結果進來可能不是所有有用的。

來源

2012-01-16 03:24:02 jfriend00

防止在點擊事件中重複調用異步加載函數

回答

相關問題