防止在单击事件中重复调用异步加载功能

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

Answer 2

如果要在开始下一个动画之前停止上一个动画，则可以使用.stop() jQuery函数来执行以下操作：

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

.stop()的选项控制停止的动画会发生什么，但是如果您只希望它跳到最后并完成，则可能需要.stop(true, true) 。

在您的特定情况下，您可能还需要担心排队的ajax调用在下一次点击之前可能尚未完成。 在这种情况下，你可以保留一个标志Ajax调用是否是在飞行中，而忽略通过再拿出任何点击，或者你可以尝试使用中止当前飞行Ajax调用.abort()如图所示这里 。

我可能建议仅在进行ajax调用时忽略任何按钮按下操作，因为更快进入结果可能不是那么有用。