如何只进行一次 Ajax 调用？答案

【问题标题】：How do I make a Ajax call only once?如何只进行一次 Ajax 调用？
【发布时间】：2017-06-20 18:39:23
【问题描述】：

当用户滚动到屏幕底部时，我会触发以下代码。唯一的问题是我希望 Ajax 调用只触发一次。我的代码是：

        var w = $(window);
        window.onscroll = function(ev) {
            if ($(document).height() - w.height() == w.scrollTop()) {


              $('#loading-image').show();
              $.ajax({
                    url: "page-2.html",
                    cache: false,
                    success: function(result){
                      $("#part2").html(result);
                      console.log();
                    },
                    complete: function(){
                      $('#loading-image').hide();
                    }
              });


            }
        };

【问题讨论】：

顺便说一句，你需要滚动底部的 ajax，我可以知道吗？
@Riaz Laskar 是的，因为我想在用户滚动到底部时加载文件
How to call ajax only once的可能重复

标签： javascript jquery ajax

【解决方案1】：

添加全局变量并以这种方式检查的最简单方法：

var w = $(window);
var BOTTOM_REACHED = false;
window.onscroll = function(ev) {
  if ($(document).height() - w.height() == w.scrollTop() && !BOTTOM_REACHED) {
      BOTTOM_REACHED = true;
      $('#loading-image').show();
          $.ajax({
                url: "page-2.html",
                cache: false,
                success: function(result){
                  $("#part2").html(result);
                  console.log();
                },
                complete: function(){
                  $('#loading-image').hide();
                  BOTTOM_REACHED = false;
                }
          });


        }
    };

【讨论】：

嗯，不，“最简单的方法”是在到达底部后解除绑定。
@KevinB，你或我都误解了这个问题。只需调用一次 ajax，而滚动每秒最多触发 100 次。你到底是什么意思到达底部？
好的，加载结果后再次绑定，所以你需要创建另一个函数并做一些绑定/取消绑定...当然这是最简单的方法:)
一旦发生 ajax 调用，事件处理程序就没有理由存在了。为什么要保留它？
Zakhar，不，@Kevin 不对。他在做假设。他假设该函数将不再被使用，没有任何依据。他根本没有那个信息。我也可以假设这是一个 SPA，更改页面时将重置变量，并且将再次使用该函数。来自我的 +1，考虑到可用信息，这是问题的正确答案。

【解决方案2】：

你可以这样试试：

var bottom_reached = false;
        $(window).scroll(function(){
        if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
            bottom_reached = true;

              $('#loading-image').show();
             if(bottom_reached)
             {
               bottom_reached = false;
              $.ajax({
                    url: "page-2.html",
                    cache: false,
                    success: function(result){
                      $("#part2").html(result);
                      console.log();
                    },
                    complete: function(){
                      $('#loading-image').hide();
                    }
              });

             }
            }
          });

【讨论】：