延迟后如何显示数组中的项目集?

时间:2018-09-04 11:44:33

标签: angularjs angularjs-ng-repeat

我正在处理聊天应用程序。 我同时从api获取所有聊天记录,并将其存储在数组名$ scope.channel中 我正在使用ng-repeat显示这些存在于数组中的项目列表。我想做的是按一定间隔显示数组中的数据集。例如,当用户打开聊天屏幕时,他/她应该能够看到很少的聊天/图像。然后,几秒钟后,将加载更多数据。

1 个答案:

答案 0 :(得分:1)

正如@Sajjad Shahi所建议的那样,您可以使用$timeout服务。也许像下面这样。您可以设置所需的延迟和卡盘尺寸。将$scope.channel数组用作srcArray,将空数组yourArrayToDisplay用作destArray。在channel指令中将yourArrayToDisplay替换为ng-repeat。据我所知,这应该为您提供理想的结果。

var dalayedChunkHandler =  {
    chunkSize: 1,
    delay: 2000,
    timeout: null,
    srcArray: [],
    destArray: [],
    dalayedChunk: function(){
        var _this = this;

        var len = _this.destArray.length;
        Array.prototype.push.apply(_this.destArray,_this.srcArray.slice(len, len + _this.chunkSize));                    

        if(_this.srcArray.length > _this.destArray.length) _this.start();
    },
    start: function(){
        var _this = this;
        _this.timeout = $timeout(function(){_this.dalayedChunk.call(_this)}, _this.delay)
    }
};


$scope.yourArrayToDisplay = []; // use this array for ng-repeat
dalayedChunkHandler.destArray = $scope.yourArrayToDisplay;
dalayedChunkHandler.srcArray = $scope.chatHistoryArray; // the array you got
dalayedChunkHandler.start();