如何知道一組異步函數是否已完成執行？

我的新聞網站提供3種類型的內容：文章，視頻和推文。我基於接收到的參數加載這些內容類型的一個或全部。所以：如何知道一組異步函數是否已完成執行？

switch(param){ 
    case 'articles': loadArticles(); break; 
    case 'videos': loadVideos(); break; 
    case 'tweets': loadTweets(); break; 
    default: loadArticles(); loadVideos(); loadTweets(); break; 
}

我使用NProgress給用戶進步的錯覺。如何在loadArticles（），loadVideos（）和loadTweets（）中設置進度值以模擬進度？

編輯：這些功能中的每一個都有其各自的工廠調用（每個都有自己的$http.get()）。例如：articleFactory.getArticles().then(function(data){$scope.articles = data;})

來源

2015-04-16 Kabir Roy

要檢查，如果所有的人都這樣做，你可以使用['$ q.all（）']（https：//開頭docs.angularjs.org/api/ng/service/$q）。 – ryanyuyu

並檢查他們的進展延期'通知'來幫助。 – estus

如何將進度參考作爲參數傳遞給這些函數，以便它們可以更新它？

case 'articles': loadArticles(progress); break; 

function loadArticles(progress) { 
    ... 
    progress.add(0.15); //Or whatever you do to increment 
}

這是您的替代方案嗎？

來源

2015-04-16 19:27:53

我想到了這個。但是我需要在某處調用NProgress.done（）。 –

switch(param){ 
    case 'articles':NProgress.start(); loadArticles(); NProgress.done() ; break; 
    case 'videos': NProgress.start(); loadVideos(); NProgress.done() ; break; 
    case 'tweets':NProgress.start(); loadTweets(); NProgress.done() ; break; 
    default: NProgress.start(); loadArticles(); loadVideos(); loadTweets(); NProgress.done() ;break; 
}

你必須使用NProgress.set（someValue中）內loadArticles（）loadVideos（）和loadTweets（）每個來電者進入，你可以推遲承諾

來源

2015-04-16 19:29:35

您可能認爲在加載函數中沒有異步調用。我的錯;編輯了這個問題。 –

打開，然後使用$q.all()等待爲他們做的一切。這是一個非常簡單的例子，你必須稍微修改你的代碼。

angular.module('app', []).controller('testCtrl', ['$scope', '$timeout', '$q', 
 
    function($scope, $timeout, $q) { 
 
    var thenFn = function(value) { 
 
     console.log('resolved ', value); 
 
     return value; 
 
     }, 
 
     q1 = $scope.q1 = $q.defer(), 
 
     q2 = $scope.q2 = $q.defer(), 
 
     p1 = $scope.q1.promise, 
 
     p2 = $scope.q2.promise; 
 

 
    //NProgress.start(); 
 
    $scope.testValue = $q.all([ 
 
     p1.then(thenFn), 
 
     p2.then(thenFn) 
 
     ]) 
 
     .then(function(values) { 
 
     console.log('all promises resolved', values); 
 
     //NProgress.complete(); 
 
     }); 
 

 
    $timeout(function() { 
 
     console.log('resolving delayed promise 1'); 
 
     q1.resolve(1);  
 
    }, 1000); 
 
    
 
    $timeout(function() { 
 
     console.log('resolving delayed promise 2'); 
 
     q2.resolve(2); 
 
    }, 2000); 
 
}]);

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body ng-controller="testCtrl"> 
 
</body> 
 

 
</html>

編輯帶上你的開發工具來查看結果當您運行的代碼片段。

其次編輯此外，還有NProgress，ngProgress的角度版本，source

來源

2015-04-16 20:54:37

如何知道一組異步函數是否已完成執行？

回答

相關問題