每10秒发射一次
每10秒发射一次
提问于 2017-09-27 15:04:42
我正在创建一个向下滚动页面自动加载数据。但是当我向下滚动页面时，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);
}
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-27 15:17:19
您只需添加一个标志postsAlreadyCalled，如：
$(window).scroll(function goDown() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !postsAlreadyCalled) {
getPosts(_primary, _second);
postsAlreadyCalled = true;
}
});所以这个函数只会被调用一次。
希望这能有所帮助。
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);
}
});#test{
height: 1000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
Stack Overflow用户
发布于 2017-09-27 15:11:43
在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
}
});或者试试这个库
下面的http://imakewebthings.com/waypoints/是调用waypoint插件并让页面在滚动页底部加载更多内容的简单方法：
$(document).ready(function() {
var $loading = $("<div class='loading'><p>Loading more items…</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);
});或
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46451302
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号