jquery - 如何防止多个 Ajax 请求

Question

我想将页面向下滚动到某个点（#first_column DIV 的高度），将从服务器端获取 json 并将内容添加到 #first_column。

现在的问题是当我向下滚动到#first_column 的高度时，几乎同时有许多 Ajax 调用。我想要的是向下滚动到#first_column 的高度，调用服务器并获取json 数据并将内容添加到#first_column。#first_column 的高度发生变化。然后我向下滚动到#first_column 的高度，将获得第二个Ajax 请求。

有什么建议么？

<script>
   $(window).scroll(function(){
   column_height = $("#first_column").height();
   screenTop = $(window).scrollTop();
   window_height = $(window).height();

if((screenTop+window_height)>=column_height){
      $.ajax({
            url: "/service/article_json.php",
            type: 'GET',
            async: false,
            cache: false,
            timeout: 30000,
            error: function(){
                return true;
            },
            success: function(data){ 
                $.each($.parseJSON(data), function(key,item) {

                  //Add content to #first_column

                });
            }
        });
  }
});

Answer 1

尝试使用标志，例如：

var ajaxInProgress = false;

$(window).scroll(function() {
  if(ajaxInProgress) return;
  ajaxInProgress = true;

  $.ajax({
    // setup here
    success: {
      // ...
      ajaxInProgress = false;
    },
    error: {
      // ...
      ajaxInProgress = false;
    }
  });
});

在此示例中，当ajaxInProgress设置为truewindow.scroll 时，回调将简单地返回并且不执行任何操作，否则标志将设置为 true，将执行调用，并且success在回调时或error回调时，标志将被重置为false允许另一个 ajax 调用.

Answer 2

您可以取消绑定事件作为您在 if 语句中执行的第一件事，然后如果您愿意，可以在 Success 方法中重新绑定它。

$(window).unbind('scroll');

Answer 3

var ajaxcallrunning;  //flag for ajax call

$(window).scroll(function() {

    if(ajaxcallrunning)
    {
      return;  // if a ajax call is running then return
    } 

    ajaxcallrunning = 1;      // otherwise set flag and execute ajax call

    $.ajax({
      // setup here
      success: {
         // ...
          ajaxInProgress = 0;    //reset flag after request complete
       },
       error: {
        // ...
         ajaxInProgress = 0;   //reset flag if error occurs
      }
    });
});