个人中心
gpt4 book ai didi

javascript - 在这里，我试图实现无限滚动，但是当我滚动得太快时会发生什么，它会触发多个 ajax 请求

转载 作者：行者123 更新时间：2023-11-30 06:38:18 26 4
gpt4 key购买 nike

在这里，我试图实现无限滚动，但是当我滚动得太快时会发生什么，它会触发多个具有相同参数的 ajax 请求，这会再次导致相同的数据。我对 scrollpagination.js 的滚动功能有疑问，我在这里给你全部内容，所以如果有人可以帮助我，请。

  index.php
  `<?php $actual_row_count = 400; ?>
   <!doctype html>
   <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <link type="text/css" href="css/style.css" rel="Stylesheet" />  
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/scrollpagination.js"></script>
        <script type="text/javascript">
            $(function(){

                var actual_count = "<?php echo $actual_row_count; ?>";
                $('#quepanel').scrollPagination({
                    'contentPage': 'loadmore.php', // the url you are fetching the results
                    'contentData': {},// { AlbumName: "Dirty Deeds", Entered: "5/1/2012" },// these are the variables you can pass to the request, for example: children().size() to know which page you are
                    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                    'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                    'beforeLoad': function(){ // before load function, you can display a preloader div
                        $('#loadMore').fadeIn();                                            
                    },
                    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                         $('#loadMore').fadeOut();

                         //var i = 0;
                         //$(elementsLoaded).fadeIn(1000);
                        if ($('#quepanel').children().size() > actual_count ){ // if more than 100 results already loaded, then stop pagination (only for testing)
                            $('#loadMoreComments').fadeIn();
                            $('#quepanel').stopScrollPagination();
                         }
                    }
                });

                // code for fade in element by element
                $.fn.fadeInWithDelay = function(){
                    var delay = 0;
                    return this.each(function(){
                        $(this).delay(delay).animate({opacity:1}, 200);
                        delay += 100;
                    });
                };

            });
        </script>
    </head>

    <body>
        <div class = "maindiv">
            <div id = "quepanel" class = "middle">

                <?php
                    $qno = 0;
                    $limit = 30;                    
                    for($i=0 ; $i< $limit ; $i++)
                    { ?><div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div> 
                <?php }?>
            </div>
        <div id = "loadMore"  class = "loadmorediv">
            <center><img src = "https://www.google.com/images/loading.gif" /></center>
        </div>
        <div id = "loadMoreComments"  class = "loadmorediv">
            <center><span>No More Records</span></center>
        </div>
    </div>
</body>
</html>

`
loadmore.php
`<?php

$requested_page = $_GET['iteration'];
$limit = 20;
$from = (($requested_page - 1) * $limit);
$qno = $from ;

            for($i=0 ; $i< $limit ; $i++)
            { ?>
                <div><span class = "srno"><?php echo ++$qno ;?></span><span><?php echo 'hello'.microtime() ;?></span></div> 
        <?php }?>
`
scrollpagination.js


 (function( $ ){
     $.fn.scrollPagination = function(options) {

        var opts = $.extend($.fn.scrollPagination.defaults, options);  
        var target = opts.scrollTarget;
        if (target == null){
            target = obj; 
        }
        opts.scrollTarget = target;

        return this.each(function() {
          $.fn.scrollPagination.init($(this), opts);
        });

  };

  $.fn.stopScrollPagination = function(){
      return this.each(function() {
        $(this).attr('scrollPagination', 'disabled');
      });

  };

  var itr = 2;
  $.fn.scrollPagination.loadContent = function(obj, opts){
     var target = opts.scrollTarget;
     var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
     if (mayLoadContent){
         if (opts.beforeLoad != null){
            opts.beforeLoad(); 
         }

         $(obj).children().attr('rel', 'loaded');
         $.ajax({
              type: 'POST',
              url: opts.contentPage+"?iteration="+itr,
              data: opts.contentData,
              success: function(data){
                itr++;
                $(obj).append(data); 
                var objectsRendered = $(obj).children('[rel!=loaded]');

                if (opts.afterLoad != null){
                    opts.afterLoad(objectsRendered);    
                }
              }
         });
     }

  };

  $.fn.scrollPagination.init = function(obj, opts){
     var target = opts.scrollTarget;
     $(obj).attr('scrollPagination', 'enabled');

     $(target).scroll(function(event){
        if ($(obj).attr('scrollPagination') == 'enabled'){
                $.fn.scrollPagination.loadContent(obj, opts);
                //alert(event.isPropagationStopped());
        }           
            //event.stopPropagation();
            //console.log(event.isPropagationStopped());
            event.preventDefault();
     });

     //$.fn.scrollPagination.loadContent(obj, opts);

 };

 $.fn.scrollPagination.defaults = {
         'contentPage' : null,
         'contentData' : {},
         'beforeLoad': null,
         'afterLoad': null  ,
         'scrollTarget': null,
         'heightOffset': 0        
 }; 
})( jQuery );`
style.css
`@CHARSET "ISO-8859-1";

    body{

            font-family:Segoe UI Light,Segoe UI,Tahoma,Arial,Verdana,sans-serif;
            font-style: normal;
            color: #C76A6A;
            color: #0099D2;
            color : black ;
        }

    #loadMoreComments{

        background-color : white;
        font-weight: bold;
        color : black;
        border : solid 1px gray;
        padding : 5px;
        -webkit-border-radius: 1px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
        border-radius: 1px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
        width : 500px;
        margin : 10px auto;
        display : none;     
    }
    #loadMore{

        margin-left: auto;
        margin-right: auto;
        display:none;
        z-index:2;
    }

    #quepanel{

        padding-top : 10px;
        margin-left : auto;
        margin-right : auto ;
        width: 600px;
    }

    .maindiv{

        width: 960px;
        height: auto;
        border : red 2px;
        margin-left: auto;
        margin-right: auto;
        background-color: #F8F8F8;
        padding : 1px 10px 10px 10px ;
    }


    .middle{

        margin-right : auto;
        margin-left : auto;
    }


    .srno{

        width  : 30px;
        display : inline-block;
        text-align: center;
        -webkit-border-radius: 45px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
        border-radius: 45px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
        background-color: rgb(180, 180, 180);
        color: #15CFA3;
        vertical-align: top;
        padding : 5px 0 ;
        color : white;
        border :  1px gray;
        margin-top: 5px;

    }   
    `

最佳答案

如何在您的 ajax 调用中使用 async: false .. 您的 loadcontent 中的 AJAX 调用将是 --

$.ajax({
              type: 'POST',
              url: opts.contentPage+"?iteration="+itr,
              data: opts.contentData,
              async: false,
              success: function(data){
                itr++;
                $(obj).append(data); 
                var objectsRendered = $(obj).children('[rel!=loaded]');

                if (opts.afterLoad != null){
                    opts.afterLoad(objectsRendered);    
                }
              }
         });

关于javascript - 在这里，我试图实现无限滚动，但是当我滚动得太快时会发生什么，它会触发多个 ajax 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13171481/

26 4 0
文章推荐： java - 带有 JDK6 的 JBOSS 5.1 中的 Web 服务客户端
文章推荐： javascript - 如果只有一个项目，jCarousel 什么也不显示
文章推荐： php - 如何使用年龄验证脚本正确重定向？
文章推荐： javascript - 将 javascript 验证传递给 mvc3 中的动态文本框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com