Angular $timeout 只调用一次函数答案

【问题标题】：Angular $timeout calls function only onceAngular $timeout 只调用一次函数
【发布时间】：2016-01-19 20:58:37
【问题描述】：

我正在使用 AngulaJs 和 Ionic。

我试图每 3 秒调用一次函数，只调用 10 次（这就是我不使用 $interval 的原因）。问题是，下面的代码只调用了一次函数（而控制台的调试代码被调用了 10 次）。

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

任何帮助将不胜感激，

提前致谢，

帕古吉姆

【问题讨论】：

您发布的代码没有问题。您必须在 $scope.play() 中进行阻止操作，因为我的 plunker 运行良好：plnkr.co/edit/izZvfrLrGxmLD5n0AnYS?p=preview。注意：您正在做的事情不会有您认为的结果。它将快速创建 10 次迭代，每次超时等待 3 秒并同时解决它们，因为 $timeout 返回一个承诺并且不会阻塞。这应该是一个递归操作，如下迈克所述。
不，这是不对的......将在每个循环中添加许多计时器，这些计时器将同时触发。循环将在毫秒内完成
@charlietfl 虽然这是真的，但 OP 明确表示“下面的代码只调用了一次函数”，这是一个不真实的说法。它将同时被调用 10 次。
您好，非常感谢您的快速回复（-：

标签： angularjs timeout

【解决方案1】：

For 循环将一起启动 10 次超时。但似乎你希望他们一个接一个地执行。对于这种情况，您可以使用递归。

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

【讨论】：

【解决方案2】：

我试图每 3 秒调用一次函数，只调用 10 次

您可以使用$interval 的可选count 参数。

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

来自文档：

$间隔

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

count （可选） 重复的次数。如果没有设置，或者为0，会重复无限期地。 （默认：0）

-- AngularJS $interval API Reference

【讨论】：

【解决方案3】：

实际上，$scope.play() 被调用了 10 次，但几乎是在同一时间。要每 3 秒调用一次函数，您可以使用闭包来保持值 i 并将超时设置为 3000*i。我想这就是你想要的：

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/。观察值和控制台日志每 3 秒更改一次。

【讨论】：

嗨，非常感谢您的快速回复（-：我使用了您的示例，它对我来说非常有效。再次感谢。