Quiero obtener valor dentro de mi función $ intervalo y usarlo como intervalo de tiempo.

Tengo index.html:

<iframe src="{{MediaFile}}" frameborder="0" allowfullscreen autoplay></iframe>

Y la tabla MediaFile:

+------+-------------+--------------+
|  ID  |   FileName  |    Interval  | //Interval in secs
+------+-------------+--------------+
|  1   |  image.jpg  |      30      |
+------+-------------+--------------+
|  2   |  image1.jpg |      10      |
+------+-------------+--------------+
|  3   |  video.mp4  |      50      |
+------+-------------+--------------+

Y index.js:

// loadMediaFile, select the list of MediaFile in my table
loadMediaFile.MediaFiles('loadMediaFile').then(function (d) {
    $scope.IntervalTime = 2000;
    $scope.Count = -1;

    $interval(function () {
        $scope.Count++
        $scope.MediaFile = '/MediaFiles/Content/' + d[$scope.Count].FileName;

        $scope.IntervalTime = d[$scope.Count].Interval * 1000;

        // This is to load back to index 0 of my MediaFile when all is loaded
        if (d.length == ($scope.Count + 1)) {
            $scope.Count = -1;
        }

    }, $scope.IntervalTime);

    console.log($scope.IntervalTime);
})

La salida debe ser:

Displays Image.jpg after 2secs
Displays Image1.jpg after 30
Displays Video.mp4 after 10
Displays Image.jpg after 50secs

El problema es que el intervalo se mantiene en 2 segundos, no actualiza el valor del intervalo ya que el valor correcto está dentro de mi $ intervalo. Es por eso que quiero devolver el valor correcto a $ scope.IntervalTime como usar el return.

0
Richard 17 sep. 2018 a las 09:59

3 respuestas

La mejor respuesta

Si desea que el primer console.log muestre 11000, coloque el operador de incremento (++) antes de la variable:

̶$̶s̶c̶o̶p̶e̶.̶I̶n̶t̶e̶r̶v̶a̶l̶T̶i̶m̶e̶ ̶=̶ ̶(̶(̶$̶s̶c̶o̶p̶e̶.̶C̶o̶u̶n̶t̶+̶+̶)̶ ̶+̶ ̶1̶0̶)̶ ̶*̶ ̶1̶0̶0̶0̶;̶
$scope.IntervalTime = ((++$scope.Count) + 10) * 1000;

La DEMO

angular.module('app', [])
.controller('ctrl', function($scope, $timeout) {
  $scope.IntervalTime = 2000;
  $scope.Count = 0;
  timeoutFn();

  function timeoutFn() {
    $timeout(function() {
      $scope.IntervalTime = ((++$scope.Count) + 10) * 1000;
      console.log($scope.IntervalTime)
      timeoutFn();
    }, $scope.IntervalTime/10);
  }
})
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app='app' ng-controller='ctrl'>
    Count={{Count}}<br>
    IntervalTime={{IntervalTime}}
</div>
1
georgeawg 17 sep. 2018 a las 15:45

Debe usar $timeout con llamadas recursivas en lugar de $interval:

  angular.module('app', []).controller('ctrl', function($scope, $timeout) {
  $scope.IntervalTime = 2000;
  $scope.Count = 0;

 (function timeoutFn() {
    $timeout(function() {
       $scope.IntervalTime = (($scope.Count++) + 10) * 1000;
       console.log($scope.IntervalTime)
       timeoutFn();
    }, $scope.IntervalTime);
  })()
})
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'></div>
1
Richard 13 mar. 2020 a las 06:53

Su código funciona correctamente ... solo agregue console.log()

$scope.IntervalTime = 2000;
$scope.Count = 0

$interval(function () {
    $scope.IntervalTime = (($scope.Count++) + 10) * 1000;
    console.log("called :- "+$scope.IntervalTime);
    $scope.getValue($scope.IntervalTime);
}, $scope.IntervalTime);

$scope.getValue = function(tt){
    console.log("get value outside :- "+tt);
};

console.log("first time called :- "+$scope.IntervalTime);
0
georgeawg 17 sep. 2018 a las 09:16