Задержка внутри петли не работает

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. Я вставить право тега в мой сНе контейнер
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; 
    }; 

DEMO on PLNKR.

Answer 2

$timeout возвращается обещание. Вы можете построить рекурсивную цепочку таких обещаний, как this, поэтому каждое следующее видео будет воспроизводиться через небольшое количество времени.