-1

我在 Home.xhtml 上使用延迟滚动。问题是，每当我向下滚动到页面底部时，JavascriptgetMoreStatusList都会不停地调用 getMoreStatusList.xhtml 页面上的函数，直到编译器抛出索引越界异常。我怎样才能解决这个问题？

1)主页.xhtml

    <h:head>

        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function() {

        function lastAddedLiveFunc() {
            $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

            $.get("getMoreStatusList.xhtml", function(data) {
                if (data != "") {
                    //console.log('add data..');
                    $(".items").append(data);
                }
                $('div#lastPostsLoader').empty();
            });
        };

      //lastAddedLiveFunc();
      $(window).scroll(function(){

          var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
          var  scrolltrigger = 0.95;

          if  ((wintop/(docheight-winheight)) > scrolltrigger) {
             //console.log('scroll bottom');
             lastAddedLiveFunc();
          }
      });
    });
    /* ]]> */
    </script>
    </h:head>

    <h:body class="thrColElsHdr">        


                <!--  -->
                <div class="items">
                    <div id="scroll_items">
                        <c:forEach var="p" items="#{statusBean.statusList}">
                            <h:form>
                                <div class="status">
                                    <c:if test="${p.statusmsg!=null}">
                                        <!--  for text status msg check-->
                                        <h:commandLink
                                            action="#{friendBean.gotoFriendProfile(p.email)}"
                                            styleClass="link">
                                            <img src="../images/profilePicture/thumb/#{p.picture}"
                                                style="height: 39px; width: 39px;" />&nbsp; <h:outputText
                                                value="#{p.statusBy}:" />
                                        </h:commandLink>

                                        <br />

                                    </c:if>


                        </c:forEach>

                    </div>
                </div>


    </h:body>
    </html>

2) 状态 Bean（包含 getMoreStatusList 函数）

 public class StatusBean {




                public List<Status> getStatusList() {
            FacesContext context = FacesContext.getCurrentInstance();
            HttpSession session = (HttpSession) context.getExternalContext()
                    .getSession(true);
            User user = (User) session.getAttribute("userdet");
            Query query = em.createQuery("SELECT s FROM Status s WHERE s.email='"
                    + user.getEmail() + "' ORDER BY s.timeMillis desc",
                    Status.class);
            List<Status> results = query.getResultList();

            Collections.sort(results);
            results = results.subList(0, 5);

            session.setAttribute("statusindex", 5);
            return results;

        }

        public List<Status> getMoreStatusList() {

            System.out.println("Inside getMoreStatusList");
            FacesContext context = FacesContext.getCurrentInstance();
            HttpSession session = (HttpSession) context.getExternalContext()
                    .getSession(false);
            User user = (User) session.getAttribute("userdet");
            Query query = em.createQuery("SELECT s FROM Status s WHERE s.email='"
                    + user.getEmail() + "' ORDER BY s.timeMillis desc",
                    Status.class);
            List<Status> results = query.getResultList();

            Collections.sort(results);
            int index = (int) session.getAttribute("statusindex");
            System.out.println(index);
            results = results.subList(index,index+5);
            session.setAttribute("statusindex", index + 5);
            return results;

        }


    }

3) 获取更多状态列表.xhtml

<h:head></h:head>
<h:body>

            <c:forEach var="p" items="#{statusBean.moreStatusList}">
                <h:form>
                    <div class="status">
                        <c:if test="${p.statusmsg!=null}">
                            <!--  for text status msg check-->
                            <h:commandLink action="#{friendBean.gotoFriendProfile(p.email)}"
                                styleClass="link">
                                <img src="../images/profilePicture/thumb/#{p.picture}"
                                    style="height: 39px; width: 39px;" />&nbsp; <h:outputText
                                    value="#{p.statusBy}:" />
                            </h:commandLink>
                            <h:outputText value="#{p.statusmsg}" styleClass="textstyle1" />
                            <h:outputText value="#{p.timeMillis}"
                                style="font-size:xx-small;float:right;color:#bbbbbb;font-style: italic;">
                                <f:converter converterId="timeConverter" />

                                </div>
                            </c:forEach>
                            <br />
                            <div class="comment">
                                <p:inputText value="#{statusBean.comment.comment}"
                                    styleClass="box" />
                                <p:commandLink value="Views"
                                    action="#{statusBean.update(p.statusId)}" ajax="false"
                                    styleClass="link" />
                            </div>
                            <br />

                        </c:if>

            </c:forEach>


</h:body>

</html>
4

1 回答 1

1

在我看来，当您在底部向下滚动时，滚动会被多次调用，因为当您向下滚动时，您的表达式wintop/(docheight-winheight)) > scrolltrigger对于像素范围将是正确的。您可以通过在 lastAddedLiveFunc() 上保持警报来验证它。如果确实是这样的话，

保留一个像“gettingNextScrollData”这样的变量来验证ajax调用是否已经在进行中。

 <script type="text/javascript">
    /* <![CDATA[ */
var gettingNextScrollData = false;
    $(document).ready(function() {

        function lastAddedLiveFunc() {
            $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
            gettingNextScrollData = true;
            $.get("getMoreStatusList.xhtml", function(data) {
                if (data != "") {
                    //console.log('add data..');
                    $(".items").append(data);
                }
                $('div#lastPostsLoader').empty();
             gettingNextScrollData = false; 
            });
        };

      //lastAddedLiveFunc();
      $(window).scroll(function(){
          if(gettingNextScrollData == false) {
          var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
          var  scrolltrigger = 0.95;

          if  ((wintop/(docheight-winheight)) > scrolltrigger) {             
               lastAddedLiveFunc();
          }
       }
      });
    });
    /* ]]> */
    </script>
于 2013-03-02T18:36:31.153 回答