离子框架 – 离子无限滚动循环永远呼唤无限回调

2023年9月2日 258次阅读

问题：如果我在on-finite回调还没有完成处理时退出当前的离子视图,那么on-infinite回调将开始在循环中被调用,直到app冻结,即使我不再在视图中了安装了离子无限涡旋的地方.

这很难再现,但我找到了一种轻松表现出来的方法.在视图上设置on-infinite回调.

<ion-infinite-scroll
    immediate-check="false"
    on-infinite="loadMore()"
    distance="5%">
</ion-infinite-scroll>

然后使用$timeout人为地将loadMore()函数减速到2秒.像这样的东西：

$scope.loadMore = function() {
    console.log("Loading more...");
    $timeout(function() {
        $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 2000);
};

现在,触发无限滚动,当你的loadMore()函数“处理”2秒时,离开你的视图.您将看到,即使您处于另一个视图中,控制台也会每2秒继续打印“加载更多…”.也就是说,在循环中调用loadMore().

在一个真实的场景中,这个错误导致应用程序严重冻结.在一些链接上,这个问题已得到解决,但没有解决方案(离子论坛正在下降,顺便说一下).有些解决方案建议在$apply()中调用infiniteScrollComplete,但这并没有解决它,实际上触发了一个已经在进行中的摘要错误.其他人建议使用$timeout(…,0)作为$apply()的替代方法,但是例如,如果你的loadMore()对你的服务器进行异步调用,那么问题仍然存在,在这种情况下,仍然存在当loadMore()忙时用户退出视图的机会.

有什么建议的解决方法吗？

离子团队：这是一个错误.关于离子无限滚动的所有文档都完全忽略了这一点.应该至少有一个警告.我的离子版本1.7.16.

最佳答案 尝试以下代码停止加载更多回调.

HTML

<ion-view view-title="Search">
    <ion-content>
        <h1>Search</h1>
        <ion-infinite-scroll
        immediate-check="false"
        ng-if="!noMoreItemsAvailable"
        on-infinite="loadMore()"
        distance="5%">
    </ion-infinite-scroll>
</ion-content>
</ion-view>

调节器

$scope.loadMore = function()
{
    $http({
    method:'GET',
    url:'http://headers.jsontest.com/'
    }).then(function(response)
    {
        console.log(response);
        $scope.noMoreItemsAvailable = true;
    }, function(response)
    {});
}
点赞