等到最後一個函數完成它的工作然後在angularjs

Question

我正在創建一個小應用程序，其中我有40個小部件，我正在循環和提取數據並重繪它。現在

$scope.loopWiget = function(){ 
    for(var i=0; i < $scope.totalWidget.length; i++) 
    { 
    if($scope.totalWidget[i].widgetType == "chart"){ 
    $scope.fetchData($scope.totalWidget[i]);} 
    if($scope.totalWidget[i].widgetType == "table"){ 
    $scope.fetchDataFortable($scope.totalWidget[i]);} 
    } 

    }; 

    $scope.fetchData = function(id){ 
    // fetching data and in response calling other function 
    $http({ 
     method: 'POST', 
     url: 'rest/dataset/metadata', 
     type: 'json', 
     headers:{'id':id} 
    }).success(function(response){ 

    $scope.drawWid(response); 
     }) 
    }; 
$scope.fetchDataFortable= function(id){ 
    // fetching data and in response calling other function 
    $http({ 
     method: 'POST', 
     url: 'rest/dataset/metaTabledata', 
     type: 'json', 
     headers:{'id':id} 
    }).success(function(response){ 

    $scope.drawWidTable(response); 
     }) 
    }; 
    $scope.drawWid = function(response){ 
     // All draw logic comes here 
    }; 
$scope.drawWidTable= function(response){ 
     // All draw logic comes here 
    }; 

$scope.totalWidget = [{'widgetId':'1','widgetType':'table'},{'widgetId':'2','widgetType':'chart'},{'widgetId':'3','widgetType':'maps'},{'widgetId':'4','widgetType':'chart'}]; 
    $scope.loopWiget(); 

我的循環犯規等待完成drawWid功能和再次呼叫fetchdata由於這個我在1號窗口小部件獲得第二小部件的數據。所以如何等待循環，直到繪製函數完成其代碼，然後調用fetchData函數以用於下一個小部件。

Answer 1

由於這是一個異步請求，所以這是常見的渲染數據隨機。有此幾個可能的解決方案：

第一種辦法：將數據存儲從響應一個陣列中，並且當所有的數據已被提取那麼只調用draw函數來逐個呈現小部件，或者將小部件呈現在循環索引處。

widgets.forEach((widget, index) => { 
      return this.myService.getData(widget.entityProp) 
       .then(res => { 
        this.drawWid(res, index); 
       }); 
}); 


    drawWid(res, index) { 
     compute logic accroding to the index of data . 
    } 

第二種方法：您可以使用$ q.all（）從所有請求中提取數據，然後進行渲染。

Answer 2

你能試試下面的代碼：

var index = 0; 
$scope.loopWiget = function(){ 
    if(!$scope.totalWidget[index]){ 
     return; 
    } 
    var id = $scope.totalWidget[index]['widgetId']; 

    if($scope.totalWidget[index].widgetType == "chart"){ 
     $scope.fetchData(id); 
     } 
     if($scope.totalWidget[index].widgetType == "table"){ 
     $scope.fetchDataFortable(id); 
     } 
}; 

$scope.fetchData = function(id){ 
    $http({ 
      method: 'POST', 
      url: 'rest/dataset/metadata', 
      type: 'json', 
      headers:{'id':id} 
     }).success(function(response){ 
       $scope.drawWid(response); 
       index++; 

     }); 
} 
$scope.drawWid = function(response){ 
    // All draw logic comes here 
    $scope.loopWiget(); 
}; 

$scope.totalWidget = [{'widgetId':'1','widgetType':'table'},{'widgetId':'2','widgetType':'chart'},{'widgetId':'3','widgetType':'maps'},{'widgetId':'4','widgetType':'chart'}]; 
$scope.loopWiget();