Angular语言 - 如何将承诺($state.go 函数)链接到超时函数

Question

我试图将一个承诺链接到我的"超时/打字机效果"函数，所以一旦他的函数完成，应该调用另一个函数，这是一个简单的$state.go。我一直在研究和查看这么多帖子，但无论我尝试什么都不起作用 - 第一个函数从未被执行/或者可能正在执行，但速度如此之快，以至于你看不到任何东西 - 相反，只有第二个（$state.go）函数立即被执行。任何想法将不胜感激。谢谢！

app.controller('homeCtrl', function($scope, $state, $q, $interval, $timeout) {
     function beginn() {
        var content = "helloo"
        $scope.typewriter = "";
        var i = 0;
        var timer = $interval(function() {
            if (i < content.length)
                $scope.typewriter += content[i];
            else {
                $interval.cancel(timer);
            }
            i++;
        }, 300)
    }
    function change() {
        $state.go('profile')
    }
    $q.when(beginn()).then(change);
});

.html：

<p>{{typewriter}}</p>

Answer 1

但是为什么需要链接这两个承诺呢？您需要做的就是在角色完成推送后做一个$state.go。

.controller('demoCtrl', ['$scope', '$state', '$interval', function($scope, $state, $interval) {
  var content = "helloo"
  $scope.typewriter = "";
  var i = 0;
  var timer = $interval(function() {
    if (i < content.length) {
      $scope.typewriter += content[i];
    } else {
      $state.go('home') // just go to the state directly
    }
    i++;
  }, 300)
}])

在这里工作 plnkr

编辑

如果你想以你的（功能）方式去做，你需要创建一个延期承诺，然后在你完成推送字母后解决/拒绝它。

  function begin() {
    var deferred=  $q.defer();//create a deferred object using $q
    var content = "helloo";
    $scope.typewriter = "";
    var i = 0;
    var timer = $interval(function() {
      if (i < content.length) {
        $scope.typewriter += content[i];
      } else {
        deferred.resolve(); //resolve this when done
      }
      i++;
    }, 300);
    return deferred.promise; // return the promise of the deferred object
  }
  begin().then(()=>$state.go('home')) // call it as usual, but using .then

在这里工作 plnkr

Answer 2

代码不起作用的原因很简单，beginn函数在调用时when在调用时立即返回undefined（在回调有机会执行之前$interval。由于您向$q.when（beginn()返回的undefined）提供了同步值，因此承诺将立即解析，因此在您提供给$interval回调之前，将立即调用then块中的change函数。

如果你仍然认为你想使用promise api，你应该如何编写代码：

app.controller('homeCtrl', function($scope, $state, $q, $interval, $timeout) {
 function beginn() {
    var content = "helloo"
    $scope.typewriter = "";
    var i = 0;
    return $q(function(resolve, reject) {
        var timer = $interval(function() {
            if (i < content.length)
                $scope.typewriter += content[i];
            else {
                $interval.cancel(timer);
                resolve();
            }
            i++;
        }, 300);          
    });
}
function change() {
    $state.go('profile')
}
beginn().then(change);

}）;

看看beginn()现在如何立即返回一个承诺，但只有在工作完成并且我们想取消计时器时才解决它。另请注意，您不再需要使用 $q.when 。

Answer 3

我认为您没有看到任何内容，因为范围在区间内松散了变量的跟踪，您需要让范围知道您已使用 $scope.$apply 进行了更改。

所以你的代码应该看起来像这样。

       var timer = $interval(function() {
            if (i < content.length){
                $scope.typewriter += content[i];
                $scope.$apply();
            else {
                $interval.cancel(timer);
            }
            i++;
        }, 300)