ngInfiniteScroll $http服务中的延迟
ngInfiniteScroll $http服务中的延迟
提问于 2014-12-11 09:50:23
我是新的角度世界，我使用ngInfiniteScroll加载更多的数据后，每个滚动。我实现了，它正在工作的fine.Currently它立即响应，但我希望延迟(1秒)在每一个滚动加载图像，我做了谷歌，但没有得到任何解决方案。
谁能指点我，怎么弄到这个问题？
在我的控制器代码中
var app = angular.module('myapp', ['infinite-scroll']);
app.factory('Colony', function($http) {
var Colony = function() {
this.items = [];
this.busy = false;
this.index = 2;
this.stopscript = false;
};
var userId = 14;
Colony.prototype.nextPage = function() {
if (this.busy) {
return;
} else {
this.busy = true;
var url = '/get_colony_articles?after=' + this.index + '&userId=' + userId + '';
$http.post(url).success(function(data) {
if(data.length>0){
var bookmark_arr=[];
var obj=[];
for (var i = 0; i < data[0].category_name.length; i++) {
for (var j = 0; j < data[0].bookmarks.length; j++) {
if (data[0].category_name[i] == data[0].bookmarks[j].category_name) {
if (data && data.error === 'no more Categories!') {
this.stopscript = true;
} else {
bookmark_arr.push(data[0].bookmarks[j]);
}
}
}
obj={category_name:data[0].category_name[i],bookmarks:bookmark_arr};
bookmark_arr=[];
this.items.push(this.items,obj);
}
this.index = this.index + 2;
this.busy = false;
}
}.bind(this));
}
};
return Colony;
}); 这是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/angular/lib/angular.min.js"></script>
<script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
<script src="js/angular/customjs/dashboard.js"></script>
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
</head>
<body ng-app="myapp">
<!-- <div><img src="images/loadingimage.gif" class="loadImg"></div> -->
<div class="recent" ng-controller='recentCtrl'>
<div class="recentname"><h2>Recent Articles</h2></div>
<div ng-repeat='items in data.bookmarks'>
<div class="root">
<div class='title'>{{items.bookmark_title}}</div>
<div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{items.bookmark_preview_image}}"></div>
</div>
</div>
<button type="submit" ng-click="loadMore(8)"> Load More</button>
</div>
<div ng-controller='colonyCtrl'>
<div id="scroll" infinite-scroll='scroller.nextPage();'
infinite-scroll-container="'scroll'"
infinite-scroll-disabled='scroller.stopscript'
infinite-scroll-distance='2'>
<div ng-repeat='item in scroller.items track by $index' class="test">
<div class="catname"><h2>{{item.category_name}}</h2></div>
<div ng-repeat='item in scroller.items[$index].bookmarks' class="test">
<div class="root">
<div class='title'>{{item.bookmark_title}}</div>
<div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{item.bookmark_preview_image}}"></div>
</div>
</div>
</div>
</div>
</div>对不起，我没有公开的网址给JsFiddle或柱塞举个例子。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-11 10:41:37
您可以这样覆盖它：
myapp.value('THROTTLE_MILLISECONDS', 1000);
把这个放在您的app.js文件中。它将将THROTTLE_MILLISECONDS的默认值更改为1000，即1秒。这样，您的函数将在1秒后被调用，而不是立即调用。
Stack Overflow用户
发布于 2014-12-11 10:04:50
要将请求延迟1秒，可以使用$timeout I angularjs，如下所示。$timeout的内部功能将在1秒(1000 of )后触发。
else {
this.busy = true;
$timeout(function() {
var url = '/get_colony_articles?after=' + this.index + '&userId=' + userId + '';
$http.post(url).success(function(data) {....
.....
}, 1000); //delay 1 second
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27419810
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号