Angular $timeout calls function only once

Question

I am using AngulaJs and Ionic.

I am trying to call a function every 3 seconds for 10 times only (this is why I am not using $interval). Thing is, the code below calls the function only once (while the debugging code to the console is called 10 times).

for (i = 0; i < 10; i++)
 {
   $timeout(function () {
     $scope.play(); // this is the called function
     console.log("progress bar: " + i);
   }, 3000);
 }

Any help will be appreciated,

Thanks in advance,

Pagugim

Answer 1

For loop will start 10 timeouts all together. But seems like you want them to execute one after another. For this case you can use recursion.

var count = 0;
replay();

function replay() {

    $timeout(function () {
     if(count < 10) {
         $scope.play();
         count++;
         replay(); // call this function again
         console.log("progress bar: " + $scope.progressVal);
     }
    }, 3000);
}

Answer 2

I am trying to call a function every 3 seconds for 10 times only

You can use the optional count argument of $interval.

var i=0;
function reportProgress() {
    $scope.play(); // this is the called function
    console.log("progress bar: " + i);
    i++;
};
$interval(reportProgress, 3000, 10);

From the Docs:

$interval

Usage $interval(fn, delay, [count], [invokeApply], [Pass]);

count (optional) Number of times to repeat. If not set, or 0, will repeat indefinitely. (default: 0)

-- AngularJS $interval API Reference

Answer 3

Actually, the $scope.play() is called 10 times, but at almost the same time. To call the function every 3 seconds, you can use a closure to keep the value i and set timeout as 3000*i. I think this is what you want:

for (i = 0; i < 10; i++) {
    (function(i) {
        $timeout(function() {
            $scope.play();
            console.log("progress bar: " + i)
        }, 3000 * i);
    })(i);
}

Jsfiddle: https://jsfiddle.net/ealonwang/ens9wu0g/15/. Watch the value and console log change every 3 seconds.