Question

我正在使用最新版本的PhoneGap，jQM和jQuery 1.8.0构建应用程序。到目前为止，除了我遇到的这个微小而烦人的问题以外，这么好。

我的index.html链接了我的show.html，其中包含以下代码：

<div id="search"> contains search bar and submit button </div>
<div id="list" style="display:none;"> 
      <ul data-role="listview" data-filter="true"> </ul>
</div>

ul标记为空，因为当单击提交按钮时，将使用ajax动态地将列表附加到其中。我最初不想显示#list div，所以我将显示设置为none。

所以这很好用，当点击提交按钮时，它会向服务器发送ajax请求并将项目附加到列表中。它还会隐藏搜索div。这也行得正常！

现在出现了问题，我添加了一个window.scroll函数来检测何时到达页面底部。

这是我的jQuery代码：

$(document).on("pageshow", "#pageID", function() {
    $("#submit").click(function() {
        $.ajax({
                success: function(data, status){
                  $('#search').hide();
                  $('#list').show();
                //append to list div and refresh list here
                }
        });
    });
    //detects bottom of page
    $(window).scroll(function () {
        if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {       
            console.log('end of the page');
                        lastPostFunc(); //infinite scroll function
        } 
    });  
});

这会将“页面末尾”打印两次到firebug控制台！此脚本存在于head标记之间。

反正只是打印一次吗？我需要这个，因为我实现了自己的无限滚动功能，问题是导致我的ajax请求两次发送到服务器。该功能运行良好，但不是问题的原因，因为即使我评论了lastPostFunc（），它仍然会打印到控制台两次!!

编辑：就我个人而言，我认为到目前为止给出的答案是错误的，它们是正确的，但它们并没有帮我解决问题。也许我需要更好地改写一下。我复制了我的代码并将其粘贴在一个独立的页面上，它只打印一次，所以我的代码实际上没有任何问题，并且它的工作方式应该如此。

因此，我想知道是否还有其他因素导致它在提交表格后打印两次。我的表单和结果页面 ON 在同一页面上。这是否意味着它导致直播活动两次？因此，在页面显示中将其打印到控制台两次？如果我是正确的，无论如何都要解决这个问题并使其仅打印 ONCE ？

感谢任何帮助。谢谢！

Answer 1

好的，我终于解决了。

显然，我所要做的就是将这行代码添加到其中：

    $(window).scroll(function (e) {
        if (reach bottom) {
            e.stopImmediatePropagation();
            console.log('End of the Page');
        } 
    });

它有效！我停止了两次打印。

Answer 2

您的函数实际上会将输出写入控制台两次以上。问题在于你的条件：

if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))

因为对于此区域内的每个滚动条件，条件将评估为true。您可以将其更改为：

if ($(window).scrollTop() == ($(document).height() - ($(window).height())))

Answer 3

这可以解决你的问题

jQuery(window).scroll(function() {
    if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {        
    console.log('test')                                         
    }
});

//更新

    var lastlogtime= null;
jQuery(window).scroll(function() {
        if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
        if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
            //your scroll logic
            console.log('test')         ;
            lastlogtime=    +new Date();                            
            }
        }
    });

jQuery脚本触发两次？也许直播活动是两次开火？

3 个答案: