Question

当用户滚动到页面底部时，我想将一个html文件附加到div。但我只想这样做一次。我设法写了一个有效的脚本，但是我注意到在页面刷新几次之后，它会不断地检索并附加HTML。请注意，我使用布尔值来控制脚本使用，我有预感这可能是我的问题所在。

这是我的脚本和div，其中会附加内容：

**编辑：删除了if（used == false），因为它不必要。 **

var used = false;
    $(window).scroll(function () {
     if ($(window).scrollTop() >= $(document).height() - $(window).height() - 400 && used == false) {
          $.get("more.html",function(data){
               $("#new-content").append(data);
                 used = true;
             });
     }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="new-content">

</div>

这是我要追加的HTML

    <div class="double-wrapper">
     <div class="app">
      <div class="app-inner"></div>
     </div>
     <div class="app">
      <div class="app-inner"></div>
     </div>
    </div>
    <div class="inn">
     <div class="inn-inner">
     </div>
    </div>

Answer 1

这是一个例子。通过在进行任何异步调用之前使用第二个布尔值来锁定函数，您可以保留原始的used以跟踪内容已成功添加。如果请求中存在错误（您可以尝试通过无效的URL更改URL），used将保持为false并且该函数可以再次尝试请求（我添加了一个错误函数来释放锁）

＆＃13;

    var used = false, locked = false;

    $(window).scroll(function () {
      //I shortened conditions (for a boolean, "!used" is same as "used == false")
      if ($(window).scrollTop() >= $(document).height() - $(window).height() - 400 && !used & !locked) {
          //lock function before the call
          locked = true;
          $.get("http://date.jsontest.com",function(data){
               //different injection for the test because i used JSON test content
               //$("#new-content").append(data);
               $("#new-content").html($("#new-content").html() + '<p>' + JSON.stringify(data) + '</p>');
               used = true;
               //release the lock when results arrive
               locked = false;
          }).fail(function(){
               console.log('request has failed');
               //release the lock on error if you want to be able to try the request again
               locked = false;
          });
      }
    });

＆＃13;

body{
    height: 1000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="new-content">

</div>

＆＃13;

当用户仅滚动到页面底部一次时，如何使用ajax加载更多内容

1 个答案: