循环内部的延迟不起作用

Question

我想在我的for循环中做一个延迟，但它不会真正起作用。 我已经尝试了堆栈溢出上的方法，但它们都不适合我想要的。

这就是我现在得到的：

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的对象。我想播放对象中的两个视频。

1. 我检查了我有多少个视频
2. 我使iframeVideo可见 （ ngHide ）
3. 我将正确的<iframe>标签插入我的div 容器
4. 它以正确的持续时间值开始$timeout
5. 如果这样做，如果有另一个视频，请执行相同的操作。当它是最后一个视频时，它应该触发一些代码。

我希望一切都清楚了。

---

我也试过这个：

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

PLNKR上的演示。

Answer 2

$timeout返回承诺。你可以像这样构建一个递归的承诺链，所以每个下一个视频都会在一段时间后播放。