Question

我做了一个“向下滚动，激活ajaxrequest，加载更多内容”功能。

但是为了使它正常工作，并且不会连续多次触发，因为用户在将ajax数据加载到文档之前滚动更多，我需要防止在有任何ajaxrequests加载时触发更多的ajaxrequests。

代码：

$(document).scroll(function() {
var scrollBottom = $(document).height() - $(window).scrollTop();
if (scrollBottom < 3000) {
var offset = parseInt($("#offset").html()) + 10;
document.getElementById('offset').innerHTML = offset;
$.ajax({
   type: "POST",
   url: "/",
   data: "offset=" + offset <?=$ajaxextra?>,
   success: function(data){
   $("#mainContent").append(data);
  },
   error: function(e) {
    alert(e);
  }
 });
}
});

这是我认为我需要的伪代码：

if (scrollBottom < 3000 && !ajax.isLoading())

人们如何做这种事？

Answer 1

既然你可以启动许多AJAX请求，我认为最好的解决方案之一 - 基本上是一个可靠的解决方案 - 首先创建一个请求数组状态，如下所示：

var ajaxRequestsState = [];

当您启动AJAX请求时，您应该向此数组添加一个元素，如下所示：

ajaxRequestsState.push({ requestId: "some identifier" });

稍后，如果你需要检查是否没有活动请求，你可以有一个这样的标志：

function isAsyncRequestActive() {
     return ajaxRequestsState.length > 0;
}

最后，无论何时请求结束或失败，您都必须这样做：

function releaseRequest(requestId) {
    var requestIndex = 0;
    var found = false;

    while(!found && requestIndex < ajaxRequestsState.length)
    {
        found = ajaxRequestsState[requestIndex].requestId == requestId;
        requestIndex++;
    }

    if(found) {
        ajaxRequestsState.splice((requestIndex-1), 1);
    }
}

releaseRequest("identifier of request which ended or failed");

这只是跟踪请求的状态并维护一组请求状态，你就可以拥有它！

*被修改！

Answer 2

我建议使用旗帜。

旗帜的概念是打开/关闭某些东西。在这种情况下，您可以指定全局布尔值（true或false）变量（more on Global Variables in JS）。当您触发给定的ajax请求时，将该变量设置为true，当ajax完成时，将其转回false。您需要做的唯一事情是在请求任何ajax请求时检查该全局变量。

考虑到你的例子：

// Global variable. It needs to be outside any function, you can make it the first line in your .js file.
var isAjaxLoading = false;
$(document).scroll(function() {
var scrollBottom = $(document).height() - $(window).scrollTop();
if (scrollBottom < 3000 && !isAjaxLoading) {
var offset = parseInt($("#offset").html()) + 10;
document.getElementById('offset').innerHTML = offset;
isAjaxLoading = true;
$.ajax({
   type: "POST",
   url: "/",
   data: "offset=" + offset <?=$ajaxextra?>,
   success: function(data){
   $("#mainContent").append(data);
   isAjaxLoading = false;
  },
   error: function(e) {
    alert(e);
    isAjaxLoading = false;
  }
 });
}
});

javascript - 我可以检查ajax当前是否正在加载？

2 个答案: