How to get data value inside function/$interval using Angularjs

Question

I want to get value inside of my function $interval and use it as interval time.

I have index.html:

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

And MediaFile table:

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

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

Output should be:

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

The problem is the interval stays at 2 secs, it doesn't update the interval value since the correct value is inside of my $interval. That's why I want to return the correct value to $scope.IntervalTime like using the return.

Why interval? Go for the timeout, and invoke another timeout inside, then another etc. — Mike Doe
– Mike Doe, Commented Sep 17, 2018 at 7:01
@emix, actually I have stored data in my sql server contains pictures and interval time. I want to change displayed pictures based on their interval value and with default 2 secs interval for first picture. — Richard
– Richard, Commented Sep 17, 2018 at 7:15
@RichardCalumpang $interval is a Promise - an asynchronous callback. You can't extract any values from it "outside", but you can keep your entire logic inside it. For example updating some counter, which will seemingly change your model in HTML code (like swap images in carousel because the counter went up) — Aleksey Solovey
– Aleksey Solovey, Commented Sep 17, 2018 at 8:21

georgeawg · Accepted Answer · 2018-09-17 15:45:46Z

1

If you want the first console.log to show 11000, put the increment operator (++) before the 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;

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

edited Sep 17, 2018 at 15:45

answered Sep 17, 2018 at 15:39

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Richard · Accepted Answer · 2020-03-13 06:53:39Z

1

You should use $timeout with recursive calling instead of $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>

edited Mar 13, 2020 at 6:53

Richard

4491 gold badge7 silver badges29 bronze badges

answered Sep 17, 2018 at 8:58

Slava Utesinov

13.5k2 gold badges22 silver badges26 bronze badges

Comments

georgeawg · Accepted Answer · 2018-09-17 09:16:44Z

0

Your code is working right.. just add 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);

edited Sep 17, 2018 at 9:16

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Sep 17, 2018 at 7:15

Jignesh Joisar

15.4k6 gold badges69 silver badges61 bronze badges

2 Comments

Richard Over a year ago

It's not working, because I want to get the called value outside the function and use it as my next interval time. On my solution it always use the 2secs interval time which is the first time called value.

Richard Over a year ago

@georgeawg, the $scope.getValue put the value on another function. how can I make the $scope.IntervalTime = tt so that the next interval time will be the output.

Collectives™ on Stack Overflow

How to get data value inside function/$interval using Angularjs

3 Answers 3

The DEMO

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The DEMO

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related