滚动到页面底部时使用ajax加载PHP代码 - 在iPhone上不起作用

Question

我有我的ajax，它说当用户到达页面底部时，它会加载一个PHP脚本。在iPhone上，它会多次加载相同的内容(它会加载id #5，然后一遍又一遍地连续加载id #4 - 在PC上，它将ID #5加载到id #1。

索引.php - AJAX

<script>
    $(document).ready(function(){
      var loadLogs = 0;
      $.ajax({
        type: 'GET',
        url: 'inc/loadLogs.php',
        data:{
          'offset': 0,
          'limit': 1
        },
        success: function(data){
          $('#showAuditLogs').append(data);
          loadLogs += 1;
        }
      });
      $(window).scroll(function(){
        if($(window).scrollTop() >= $(document).height() - $(window).height()){
          $.ajax({
            type: 'GET',
            url: 'inc/loadLogs.php',
            data:{
              'offset': loadLogs,
              'limit': 1
            },
            success: function(data){
              $('#showAuditLogs').append(data);
              loadLogs += 1;
            }
          });
        }
      });
    });
  </script>

索引.php - HTML

<div id="showAuditLogs">
</div>

加载日志.php

<?php
  include 'database.php';
  $limit = $_GET['limit'];
  $offset = $_GET['offset'];
  $logs = DB::query("SELECT * FROM auditlog ORDER BY id DESC LIMIT $limit OFFSET $offset");
  foreach($logs as $l){
    $action = $l['action'];
    $logId = $l['id'];
    echo "<p class='card-text'><strong>$logId </strong>$action</a></p><hr style='background-color: white;'>";
  }
?>

Answer 1

尝试创建一个元素，例如按钮，当您单击脚本时加载脚本，然后在滚动到底部时使用此代码触发按钮(适用于所有设备(：

var CheckIfScrollBottom = debouncer(function() {
    if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $('your button id or class').trigger('click');
    }
});

您的 ajax 将是 ：

<script>
  $(document).ready(function(){
    var loadLogs = 0;
    $.ajax({
      type: 'GET',
      url: 'inc/loadLogs.php',
      data:{
        'offset': 0,
        'limit': 1
      }
      ,
      success: function(data){
        $('#showAuditLogs').append(data);
        loadLogs += 1;
      }
    }
          );
    var CheckIfScrollBottom = debouncer(function() {
      if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $.ajax({
          type: 'GET',
          url: 'inc/loadLogs.php',
          data:{
            'offset': loadLogs,
            'limit': 1
          }
          ,
          success: function(data){
            $('#showAuditLogs').append(data);
            loadLogs += 1;
          }
        }
              );
      }
    }
                                       );
  }
                   );
  document.addEventListener('scroll', CheckIfScrollBottom);
  function debouncer(a, b, c) {
    var d;
    return function() {
      var e = this,
          f = arguments,
          g = function() {
            d = null, c || a.apply(e, f)
          }
      ,
          h = c && !d;
      clearTimeout(d), d = setTimeout(g, b), h && a.apply(e, f)
    }
  }
  function getScrollXY() {
    var a = 0,
        b = 0;
    return "number" == typeof window.pageYOffset ? (b = window.pageYOffset, a = window.pageXOffset) : document.body && (document.body.scrollLeft || document.body.scrollTop) ? (b = document.body.scrollTop, a = document.body.scrollLeft) : document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop) && (b = document.documentElement.scrollTop, a = document.documentElement.scrollLeft), [a, b]
  }
  function getDocHeight() {
    var a = document;
    return Math.max(a.body.scrollHeight, a.documentElement.scrollHeight, a.body.offsetHeight, a.documentElement.offsetHeight, a.body.clientHeight, a.documentElement.clientHeight)
  }
</script>