Question

我的新闻网站提供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;})

Answer 1

如何将进度参考作为参数传递给这些函数，以便他们可以更新它？

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

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

这是你的另类选择吗？

Answer 2

将每个调用转换为您可以推迟的承诺，然后使用$q.all()等待所有这些调用完成。这是一个非常简单的示例，您必须稍微调整一下代码。

＆＃13;

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);
}]);

＆＃13;

<!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>

＆＃13;

修改在运行代码段时，启动开发工具以查看结果。

第二次编辑此外，还有NProgress的角度版本，ngProgress，source

Answer 3

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;
}

你必须在loadArticles（）loadVideos（）和loadTweets（）

中使用NProgress.set（somevalue）

我怎么知道一组异步函数是否已完成执行？

3 个答案: