javascript - 使用 JS 播放一系列图像，使用 $timeout 来安排帧

Question

我正在使用 AngularJS 在缓存客户端中预取图像，然后我想为这些预取图像制作动画。

我的预取代码:

$scope.prefetch=function(limit) {
  for (var i=0; i<limit; i++) {
    var date = new Date($scope.dt);
    if ($scope.fileFlag == false) {
      if ($scope.viewmodel.timeResolution == 'yearly')
        date = new Date(date.setFullYear(date.getFullYear() + i));
      else if ($scope.viewmodel.timeResolution == 'monthly')
        date = new Date(date.setMonth(date.getMonth() + i));
      else if ($scope.viewmodel.timeResolution == 'daily') {
        date = new Date(date.setDate(date.getDate() + i));
      }
    } else {
      date = $scope.files[$scope.files.indexOf($scope.idSelectedVote) + i];
    }

    console.log( $http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap, {'cache': true}));
  }
};

然后我做这样的事情来播放那些图像

$scope.play=function(limit) {
  for (var i=0; i<limit; i++) {
    $scope.map.src= site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" +  $scope.viewmodel.region + "/" +  parseInt(date)+i + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap;
    $scope.sleepFor(500);
  }                
};

$scope.sleepFor = function( sleepDuration ) {
  var now = new Date().getTime();
  while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}

我的问题是当我调用 play(4) 时它只显示第一张和最后一张图像而不是动画。关于如何改进此代码或不同的方法以便我可以做到这一点，我有什么想法吗？

Answer 1

您的 sleepFor 是一个空闲循环:您旋转但什么都不做，但您阻止了任何其他工作的完成。这不是 Javascript 中延迟工作一段时间或安排功能在稍后时间运行的方式。在 Javascript 中，我们使用 window.setTimeout —— 在 Angular 中，我们有方便的 $timeout 服务来提供:

$scope.play = function(limit) {
  for (var i=0; i < limit; i++) {
    $scope.map.src = site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" +  $scope.viewmodel.region + "/" +  parseInt(date)+i + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap;

    var nextFrameMs = 500;
    $timeout($scope.play, nextFrameMs);
  }
};

在您的示例中，无论您的 $scope 在哪里被提供给您——假设这是在一个 Controller 中，您将有一些像 module.controller($scope, ... ) -- 您必须注入(inject) $timeout 服务才能使用它。

其他资源:

• Angular's documentation on $timeout
• MDN documentation of window.setTimeout