javascript - 如何仅运行此 Angular $interval 函数三次(3 个循环)

Question

我想从我的 Controller 运行以下函数，使用间隔并在 View 模板中生成三个不同的头像。

目前，它只生成一个 avatar.png ，但我很想生成三个不同的。

那么我怎样才能设置 html 以显示三个不同的图像呢？ 这是我的代码:

Controller :

$scope.capture = function(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

$interval (function(){
    $scope.capture();
}, 1500);

以及我绘制图像的 Canvas 模板:

<canvas id="canvas"></canvas> 

所以基本上，我希望在 1.5 秒后绘制图像并且绘制的图像总数应该是 3。每个图像都有自己的 Canvas ID 不同。

Answer 1

你为什么不用$timeout

for(var i=0;i<3;i++) {
    $timeout (function(){
        $scope.capture();
    }, 1500*i);
}

这将执行您的函数 3 次。您可能需要编写逻辑以在具有不同 ID 的不同 Canvas 中绘制图像。