Question

我正在尝试根据google的建议实施SEO友好的无限滚动，如此处所示（http://scrollsample.appspot.com/items?page=7）。我有一个jquery函数，可以在有人滚动到页面底部时向php文件发送请求（该请求从db中获取数据），现在一切正常，除了用户滚动到页面底部时，请求函数会被多次触发。因此，重复的数据条目被加载到页面中，现在我知道这不是来自我的php文件，因为我直接在浏览器中打开了页面，一切都很好。在http://devx.dx.am/haze/categor.php?artemis=foo&&page=1

处检查错误

我已经在这里（jQuery .load() callback function fires multiple times）和这里（$(window).load() is executing 2 times?）以及其他一些地方尝试了解决方案。

$(window).bind('scroll', function() { //#cagorwrap is the div that should contain the data retrieved
    if($(window).scrollTop() >= $('#cagorwrap').offset().top + $('#cagorwrap').outerHeight() - window.innerHeight) { //344.6
      var queryParameters = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;
      while (m = re.exec(queryString)) {
          queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
      }
      var url2 = "modules/paginate.php?numpages=set";
 // #rc is a hidden div too
      $("#rc").load(url2, function() {
        var rc = $(this).html();
        if (queryParameters['page'] < rc) {
          queryParameters['page']++;
          console.log(rc);
          var stateObj = queryParameters['page'];
          let cagh = $('#cagorwrap').height() + 344.6 - 75;
          $("#cagorwrap").height(cagh);
          history.pushState(null, null, "categor.php?artemis=cat&&page="+stateObj);
          var url = "modules/paginate.php?artemis=cats&&page="+stateObj;
          $("#obtainer").load(url, function () {
            $("#cagorwrap").append($(this).html());
          }); //#obtainer is a hidden div that receives the data at first before it is appended to #cagorwrap
        } else{
          //unbind scroll here
        }
      });
    }
});

Answer 1

好吧，如果其他所有方法都失败了，而您绝对需要一个解决方案，则可以添加一个 counter=1;一开始并且仅在以下情况下触发请求功能

  counter++;
    if (counter%2==0){//fire request}

这不是干净的，但是如果您为此花了太多时间并且想稍后再解决问题...

jQuery .load函数运行多次

1 个答案: