Question

我正在创建向下滚动页面自动加载数据。但是当我向下滚动页面时，getPosts函数不止一个。当我alert()功能后，没有问题。如何在页面坍塌时阻止多次启动？

var _primary = 0;
var _second = 15;
$(document).ready(function() {
  getPosts(_primary, _second);
});

function getPosts(x, y) {
  $.ajax({
    type: "POST",
    dataType: "json",
    data: {
      uidHash: "<?php echo md5($_SESSION['uid'].'pass_!_'); ?>",
      minVal: _primary,
      maxVal: _second
    },
    url: 'postloader.php',
    success: function(posts) {
      $('#postholder').append(posts);
      _primary += 15;
      _second += 15;
    }
  });
}

$(window).scroll(function goDown() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    getPosts(_primary, _second);
  }
});

Answer 1

在jQuery中，检查是否使用滚动功能点击了页面底部。一旦你点击它，做一个ajax调用（你可以在这里显示一个加载图像，直到ajax响应）并获取下一组数据，将它附加到div。当您再次向下滚动页面时，将执行此功能。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});

或试试这个lib

http://imakewebthings.com/waypoints/ 下面是调用一个waypoints插件并让页面在滚动到达底部时加载更多内容的简单方法：

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});

OR

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
        var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.</br>Next line.</p>';
            }
            $('#myScroll').append(html);
            counter++;

            if(counter==2)
            $('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button></br></br>');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
        <p >This is test data.</br>Next line.</p>
    </div>
</body>
</html>

Answer 2

你可以添加一个标志postsAlreadyCalled，如：

$(window).scroll(function goDown() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !postsAlreadyCalled) {
    getPosts(_primary, _second);
    postsAlreadyCalled = true;
  }
});

因此该函数只会被调用一次。

希望这有帮助。

＆＃13;

var _primary = 0;
var _second = 15;
var postsAlreadyCalled = false;

$(document).ready(function() {
  getPosts(_primary, _second);
});

function getPosts(x, y) {
  console.log('Get data');
}

$(window).scroll(function goDown() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !postsAlreadyCalled) {
    getPosts(_primary, _second);
    postsAlreadyCalled = true;
    
    setTimeout(function(){
        postsAlreadyCalled = false;
    },10000);
  }
});

＆＃13;

#test{
  height: 1000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

＆＃13;

每10秒发射一次

2 个答案:

或试试这个lib

OR