动态改变 Angular 的 $interval 延迟

Question

我有一个旅游服务，它返回一个解析为旅游对象的承诺。游览对象有一些场景，每个场景都有一些热点。在主视图的控制器中，我有一个“私有”_init() 函数，它等待游览解决，然后设置一些东西。

我使用的间隔应该是一个一个无限地在场景中随机播放，但我希望场景之间的延迟基于当前活动场景的热点数量，例如有 2 个热点的场景应该持续 7.5 秒，有 1 个热点的场景应该持续 5 秒，以此类推。

这是我目前所拥有的：

var i = 0, ready, scenesCount, activeScene, duration, transition = null;
_init();

// Later on down...

function _init()
{
    ready   =   false;

    AlexaTourApi.getTour( null).then( function ( res) {
        $log.log( 'AlexaTourController got tour', res);
        $scope.tour     =   res;
        scenesCount     =   $scope.tour.scenes.length;
        activeScene     =   0;

        duration        =   (getActiveScene().hotspots.length + 1) * 2500;

        ready           =   true;
        transition      =   $timeout( _doTransition(), duration);
    });
}

function _doTransition()
{
    activeScene =   (i++ % scenesCount);

    duration    =   (getActiveScene().hotspots.length + 1) * 2500;

    transition  =   $timeout( _doTransition(), duration);
}

编辑：

我按照 quirimmo 的建议实现了一些新代码：

function _init()
{
    ready   =   false;

    AlexaTourApi.getTour( null).then( function ( res) {
        $log.log( 'AlexaTourController got scenes', res);
        $scope.tour     =   res;
        scenesCount     =   $scope.tour.scenes.length;
        activeScene     =   0;

        duration        =   (getActiveScene().hotspots.length + 1) * 2500;

        ready           =   true;
        _resetInterval();
    });
}

function _resetInterval()
{
    if ( transition !== null) {
        $interval.cancel( transition);
    }

    duration    =   (getActiveScene().hotspots.length + 1) * 2500;
    transition  =   $interval( _doTransition(), duration);
}

function _doTransition()
{
    activeScene =   (i++ % scenesCount);
}

直到现在我才收到f is not a function 异常。

Answer 1

你有一个$timeout，它在里面递归地调用另一个$timeout。等等。这意味着超时永远不会停止，因为它们会在内部执行的代码停止时停止。

使用$interval 更改您的代码并在开始新代码之前清除之前的代码。它应该可以正常工作。

附：同样，我认为您也可以在开始新的超时之前取消上一个超时。见$timeout.cancel方法

var i = 0,
  ready, scenesCount, activeScene, duration, transition = null;
_init();

// Later on down...

function _init() {
  ready = false;

  AlexaTourApi.getTour(null).then(function(res) {
    $log.log('AlexaTourController got tour', res);
    $scope.tour = res;
    scenesCount = $scope.tour.scenes.length;
    activeScene = 0;

    duration = (getActiveScene().hotspots.length + 1) * 2500;
    ready = true;
    clearTimeoutAndStartNewOne();
  });
}
// here we clear the timeout and then we start a new one which is connected to the other function
function clearTimeoutAndStartNewOne() {
  if (transition !== null) {
    $timeout.cancel(transition);
  }
  duration = (getActiveScene().hotspots.length + 1) * 2500;
  transition = $timeout(_doTransition, duration);
}
// here we simply implement the logic of the timeout to be repeated
function _doTransition() {
  activeScene = (i++ % scenesCount);
}