我有一个对象数组,但我不需要查看全部,我想创建一个 InfiniteScroll 并为每 8 个项目发出请求,我的 JQuery 问题是,该方法调用该函数 8 次,导致重复相同的元素。
这是我的方法:
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(document).height() - $(window).height() - a_little_bit_before) {
$scope.NextIncidents();
}
});
});
这样我就可以完成我的http请求
$scope.newincidents = [];
$scope.NextIncidents = function() {
var urlnext = $scope.nextincidents;
if (!urlnext) {
$("#infinite").prop("disabled", true);
} else {
$("#infinite").prop("disabled", false);
}
var mycookie = $cookieStore.get('Token');
$http({
method: 'GET',
url: urlnext,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-Token': '\UsernameToken Token="' + mycookie + '"',
},
}).success(function(data, status) {
$scope.newincidents = data._embedded.incidents;
var nextLink = data._links.next;
$scope.nextincidents = nextLink ? nextLink.href : null;
for (var n in $scope.incidents) {
var month = new Date($scope.newincidents[n].upload_date).getMonth();
$scope.incidents.push($scope.newincidents[n]);
$scope.loadIncidents();
};
}).error(function(data, status, headers, config) {
return false;
});
$scope.loadIncidents();
};
当用户在底部时,如何才能只调用一次该函数?现在该功能可以工作,但是重复对象
最佳答案
直接绑定(bind)到像 window.scroll 或 window.resize 这样的事件从来都不是一个好主意,因为每个浏览器触发这些事件的方式都不同。相反,您应该使用去抖/限制方法,这将保证您的事件处理程序不会被不必要地调用。
Ben Alman 为此编写了一个非常流行的插件,但许多主要的 JavaScript 库还包含去抖和限制的方法(下划线、lodash、 Angular 等)。
http://benalman.com/projects/jquery-throttle-debounce-plugin/
其工作原理如下:
$(window).on('scroll', $.throttle(300, function(){
// handle the event here
}));
此外,稍后您可能会偶然发现另一个问题......对于 DOM 来说,“无限”的概念实际上并不存在。您将达到一个限制,浏览器可能会崩溃。解决此问题的典型方法称为“虚拟渲染”,其中当您将新项目添加到底部时,您还会从集合的开头删除项目(反之亦然)。
为了向用户呈现他们仍在“滚动”的错觉,您通常会将外部容器的高度设置为内容同时呈现时实际的高度。这种方法意味着集合中的每个元素都有某种已知/可计算的高度。
关于javascript - 当用户滚动到页面底部附近时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30991346/