javascript - 防止在单击事件中重复调用异步加载函数

Question

我有一个回调函数，一次加载一页数据。单击后退和下一个链接时，将调用/触发该函数。当最终用户快速、随后单击下一个链接并重复调用加载函数时，我遇到了动画和加载及时完成的​​问题。我意识到这是一个异步调用，但是有没有一种方法可以对加载/动画进行排队或暂停，以便一个加载不会在另一个加载完成之前运行？

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

---

编辑

以前的每次调用都会重置它，但是使用第一次点击并忽略后续点击

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