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

修改

之前的呼叫重置它，但要使用第一次点击＆amp;忽略后续点击

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呼叫是否在飞行中保留一个标记，并忽略当时通过的任何点击，或者您可以尝试使用.abort()中止当前正在进行的ajax呼叫，如图所示{{3 }}

我可能建议在ajax调用已经进行时忽略任何按钮按下，因为速度越快，结果可能就没那么有用了。

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

2 个答案: