Angular - 如何将承诺（$state.go 函数）链接到超时函数？

Question

我正在尝试将一个 promise 链接到我的 'timeout/typewriter effect' 函数，所以一旦他的函数完成，应该调用另一个函数，它是一个简单的 $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

我认为您没有看到任何东西，因为作用域在区间内跟踪您的变量，您需要让作用域知道您已经使用 $scope.$apply 进行了更改。

因此您的代码应如下所示。

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

        }, 300)

Answer 2

但是为什么需要将两个 promise 链接起来呢？当角色完成推送时，您需要做的就是 $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 here

编辑

如果您想以您的（功能）方式进行操作，您需要创建一个延迟承诺，然后在完成推送字母后 resolve/reject 它。

  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 here

Answer 3

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

的回调之前立即被调用

如果你仍然认为你想使用承诺 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() 现在如何 returns 立即承诺，但仅在工作完成且我们想要取消计时器时才解决它。另请注意，您不再需要使用 $q.when.

Angular - 如何将承诺（$state.go 函数）链接到超时函数？

Angular - how to chain a promise ($state.go function) to a timeout function?

timeout

promise

angularjs

angular-promise