javascript - for 循环内的延迟不起作用

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

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 返回一个不同的 promise 。要正确取消它们，您需要保存所有它们。

此示例安排了从时间零开始的几个后续操作。

  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 promise 。

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

DEMO on PLNKR .