Javascript PHP jQuery无限滚动函数正在停止执行我的另一个jQuery脚本

我正在使用jquery无限滚动函数加载记录。我面临着一些问题

它在移动设备上不起作用。然而，它可以在桌面浏览器的移动模式下工作，但不能在实际的移动设备上运行。当滚动到底部时，数据不会加载

由于我从主页的div中的另一个页面加载结果，另一个负责在单击时显示更多或更少文本的jQuery脚本根本不起作用。似乎发生了一些交叉操纵。它工作得很好，直到我在同一页上加载数据而不是从另一页加载数据时没有应用无限滚动

这是密码

timeline.php

<div id="loadMoreData"></div>

<?php
session_start();
if(!isset($_SESSION['dateapplogin'])){
  exit();
}
include('../functions.php');

//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
$item_per_page = 2;

//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
  header('HTTP/1.1 500 Invalid page number!');
  exit();
}

//get current starting point of records
$position = (($page_number-1) * $item_per_page);

// Fetch User Contents
$contents = $pdo->prepare("SELECT * FROM user_content WHERE uc_user = :user ORDER BY uc_id DESC LIMIT $position, $item_per_page");
$contents-> bindValue(':user', $person);
$contents-> execute();
?>
<?php while($content = $contents->fetch()){ ?>
  <div class="media timeline-media-margin">
    <div class="row">
      <div class="grid-sizer col-md-12 col-sm-12"></div>
      <div class="grid-item col-md-12 col-sm-12 pr">
        <div class="media-grid">
          <?php if($content['uc_type'] == 'photo'){ ?>
            <img src="images/post-images/6.jpg" alt="" class="img-responsive post-image" />
          <?php } if(trim($content['uc_desc']) != ''){ ?>
            <div class="text-container">
              <div class="content hideContent">
                <p><?php echo $content['uc_desc']; ?></p>
              </div>
              <div class="show-more">
                <span>Show more</span>
              </div>
            </div>
          <?php } ?>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

loadscroll.js

(function($) {
  $.fn.loaddata = function(options) {
    var settings = $.extend({
      loading_gif_url: "images/loader.gif", //url to loading gif
      end_record_text: "No more records found!", //no more records to load
      data_url: "processes/loadTimeline.php", //url to PHP page
      start_page: 1 //initial page
    },options);

    var el = this;
    loading = false;
    end_record = false;
    contents(el, settings); //initial data load

    // $(window).scroll(function(){
    $('body').scroll(function(){
      if($('body').scrollTop() + $(window).height() >= $(document).height()){
        contents(el, settings); //load content chunk
      }
    });
  };

  //Ajax load function
  function contents(el, settings) {
    var load_img = $("<img/>").attr("src", settings.loading_gif_url).addClass("loading-image"); //create load image
    var record_end_txt = $("<div/>").text(settings.end_record_text).addClass("end-record-info"); //end record text
    if (loading == false && end_record == false) {
      loading = true; //set loading flag on
      el.append(load_img); //append loading image
      setTimeout(function(){
        $.post(settings.data_url, { page: settings.start_page }, function(data) {
          //jQuery Ajax post
          if (data.trim().length == 0) {
            //no more records
            el.append(record_end_txt); //show end record text
            load_img.remove(); //remove loading img
            end_record = true; //set end record flag on
            return; //exit
          }
          loading = false; //set loading flag off
          load_img.remove(); //remove loading img
          el.append(data); //append content
          settings.start_page++; //page increment
        });
      }, 500);
    }
  }
})(jQuery);
$("#loadMoreData").loaddata();

（函数（$）{
$.fn.loaddata=函数（选项）{
变量设置=$.extend({
加载\u gif\u url:“images/loader.gif”，//加载gif的url
end_record_text:“找不到更多记录！”，//没有更多要加载的记录
data_url:“processs/loadTimeline.php”//php页面的url
起始页：1//起始页
}，选项）；
var el=这个；
加载=假；
结束记录=假；
内容（el，设置）；//初始数据加载
//$（窗口）。滚动（函数（）{
$（'body'）。滚动（函数（）{
if（$（'body'）.scrollTop（）+$（窗口）.height（）>=$（文档）.height（））{
内容（el，设置）；//加载内容块
}
});
};
//Ajax加载函数
功能内容（el、设置）{
var load_img=$（“”）.text（settings.end_record_text）.addClass（“end record info”）；//end record text
if（加载==false&&end_记录==false）{
loading=true；//设置加载标志
el.append（load_img）；//追加加载图像
setTimeout（函数（）{
$.post（settings.data\u url，{page:settings.start\u page}，函数（数据）{
//jqueryajaxpost
if（data.trim（）.length==0）{
//没有更多的记录
el.append（record_end_txt）；//显示结束记录文本
load_img.remove（）；//删除正在加载的img
end_record=true；//在上设置结束记录标志
return；//退出
}
loading=false；//关闭loading标志
load_img.remove（）；//删除正在加载的img
el.append（数据）；//追加内容
settings.start_page++；//页面增量
});
}, 500);
}
}
})（jQuery）；
$（“#loadMoreData”）.loaddata（）；

loadTimeline.php

<div id="loadMoreData"></div>

<?php
session_start();
if(!isset($_SESSION['dateapplogin'])){
  exit();
}
include('../functions.php');

//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
$item_per_page = 2;

//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
  header('HTTP/1.1 500 Invalid page number!');
  exit();
}

//get current starting point of records
$position = (($page_number-1) * $item_per_page);

// Fetch User Contents
$contents = $pdo->prepare("SELECT * FROM user_content WHERE uc_user = :user ORDER BY uc_id DESC LIMIT $position, $item_per_page");
$contents-> bindValue(':user', $person);
$contents-> execute();
?>
<?php while($content = $contents->fetch()){ ?>
  <div class="media timeline-media-margin">
    <div class="row">
      <div class="grid-sizer col-md-12 col-sm-12"></div>
      <div class="grid-item col-md-12 col-sm-12 pr">
        <div class="media-grid">
          <?php if($content['uc_type'] == 'photo'){ ?>
            <img src="images/post-images/6.jpg" alt="" class="img-responsive post-image" />
          <?php } if(trim($content['uc_desc']) != ''){ ?>
            <div class="text-container">
              <div class="content hideContent">
                <p><?php echo $content['uc_desc']; ?></p>
              </div>
              <div class="show-more">
                <span>Show more</span>
              </div>
            </div>
          <?php } ?>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

显示更多

custom.js：这是添加无限滚动后不会执行的代码

// Show Hide Text
  $('.content').each(function(k,v){
    if($(v).text().length < 200){
      $(v).removeClass('hideContent');
      $(v).next().hide();
      $(".content p").css('margin','0px 0px 5px');
    }
  });

  $(".show-more span").click(function() {
    var $this = $(this);
    var $content = $this.parent().prev(".content");
    var linkText = $this.text().toUpperCase();
    if(linkText === "SHOW MORE"){
      linkText = "Show less";
      $content.toggleClass('hideContent showContent');
    }else {
      linkText = "Show more";
      $content.toggleClass('showContent hideContent');
    };
    $this.text(linkText);
  });

//显示隐藏文本
$（'.content'）。每个（函数（k，v）{
如果（$（v）.text（）.长度<200）{
$（v）.removeClass（'hideContent'）；
$（v）.next（）.hide（）；
$（“.content p”）.css（'margin'，'0px 0px 5px'）；
}
});
$（“.show more span”）。单击（函数（）{
var$this=$（this）；
var$content=$this.parent（）.prev（“.content”）；
var linkText=$this.text（）.toUpperCase（）；
如果（linkText==“显示更多”）{
linkText=“显示较少”；
$content.toggleClass（'hideContent showContent'）；
}否则{
linkText=“显示更多”；
$content.toggleClass（'showContent hideContent'）；
};
$this.text（linkText）；
});

很多人将Javascript的异步特性误认为是并行性。Javascript仍然是单线程的，一次只能做一件事。因此，如果你的无限卷轴忙于做你所做的事情，而没有让执行返回到事件循环，那么你的其他任务将不会运行，反之亦然。我敢打赌，这是一个错误sy wait loop隐藏在所有代码中的某个地方。@Sammitch你能给出一个解决方案吗？