Question

我希望在for循环中延迟，但它确实无法正常工作。我已经尝试过在stackoverflow上的方法了，但是没有一个能用于我想要的东西。

这就是我现在所拥有的：

var iframeTimeout;
var _length = $scope.iframes.src.length;
for (var i = 0; i < _length; i++) {

    // create a closure to preserve the value of "i"
    (function (i) {
        $scope.iframeVideo = false;
        $scope.iframes.current = $scope.iframes.src[i];
        $timeout(function () {
            if ((i + 1) == $scope.iframes.src.length) {
                $interval.cancel(iframeInterval);
                /*Change to the right animation class*/
                $rootScope.classess = {
                    pageClass: 'nextSlide'
                }
                currentId++;
                /*More information about resetLoop at the function itself*/
                resetLoop();
            } else {
                i++;
                $scope.iframes.current = $scope.iframes.src[i];
            }
        }, $scope.iframes.durationValue[i]);

    }(i));

}
alert("done");

这就是我想要的：首先，我得到了一个包含src，duration和durationValue的对象。我想播放我对象中的两个视频。

我查看了有多少视频
我iframeVideo可见（ngHide）
我将右<iframe>标记插入我的div容器
以适当的持续时间值

$timeout

如果已完成，如果有其他视频，请执行相同的操作。当它是最后一个视频时，它应该激活一些代码。

我希望一切都清楚。

我也试过这个：

var iframeInterval;
var i = 0;

$scope.iframeVideo = false;
$scope.iframes.current = $scope.iframes.src[i];

iframeInterval = $interval(function () {
    if ((i + 1) == $scope.iframes.src.length) {
        $interval.cancel(iframeInterval);
        /*Change to the right animation class*/
        $rootScope.classess = {
            pageClass: 'nextSlide'
        }
        currentId++;
        /*More information about resetLoop at the function itself*/
        resetLoop();
    } else {
        i++;
        $scope.iframes.current = $scope.iframes.src[i];
    }
}, $scope.iframes.durationValue[i])

Answer 1

每个$timeout都会返回不同的承诺。要正确取消它们，您需要保存所有人。

此示例计划从零时开始的若干后续操作。

  var vm = $scope;
  vm.playList = []
  vm.playList.push({name:"video1", duration:1200});
  vm.playList.push({name:"video2", duration:1300});
  vm.playList.push({name:"video3", duration:1400});
  vm.playList.push({name:"video4", duration:1500});

  vm.watchingList=[];

  var timeoutPromiseList = [];
  vm.isPlaying = false;

  vm.start = function() {
      console.log("start");
      //ignore if already playing
      if (vm.isPlaying) return;
      //otherwise
      vm.isPlaying = true;
      var time = 0;
      for (var i = 0; i < vm.playList.length; i++) {
        //IIFE closure
        (function (i,time) {
          console.log(time);
          var item = vm.playList[i];
          var p = $timeout(function(){playItem(item)}, time);
          //push each promise to list
          timeoutPromiseList.push(p);
        })(i,time);
        time += vm.playList[i].duration;
      }
      console.log(time);
      var lastPromise = $timeout(function(){vm.stop()}, time);
      //push last promise
      timeoutPromiseList.push(lastPromise);
  };

然后停止，取消所有$timeout承诺。

  vm.stop = function() {
      console.log("stop");
      for (i=0; i<timeoutPromiseList.length; i++) {
          $timeout.cancel(timeoutPromiseList[i]);
      }
      timeoutPromiseList = [];
      vm.isPlaying = false;
  };

DEMO on PLNKR。

Answer 2

$timeout返回承诺。您可以构建一个递归的承诺链，例如this，这样每个下一个视频都会在很短的时间后播放。

内部延迟循环不起作用

2 个答案: