javascript - Delay inside for loop not working -

i want make delay inside for loop, won't work. i've tried ways on stackoverflow, none of them work want.

this i've got right now:

var iframetimeout; var _length = $scope.iframes.src.length; (var = 0; < _length; i++) {      // create closure preserve 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 right animation class*/                 $rootscope.classess = {                     pageclass: 'nextslide'                 }                 currentid++;                 /*more information resetloop @ function itself*/                 resetloop();             } else {                 i++;                 $scope.iframes.current = $scope.iframes.src[i];             }         }, $scope.iframes.durationvalue[i]);      }(i));  } alert("done"); 

this want: first of got object holds src, duration , durationvalue. want play both video's have in object.

1. i check how many video's i've got
2. i make iframevideo visible (nghide)
3. i insert right <iframe> tag div container
4. it starts $timeout right duration value
5. if that's done, same if there video. when last video should fire code.

i hope it's clear.

---

i've tried this:

var iframeinterval; var = 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 right animation class*/         $rootscope.classess = {             pageclass: 'nextslide'         }         currentid++;         /*more information resetloop @ function itself*/         resetloop();     } else {         i++;         $scope.iframes.current = $scope.iframes.src[i];     } }, $scope.iframes.durationvalue[i]) 

each $timeout returns different promise. cancel them, need save of them.

this example schedules several subsequent actions starting @ time zero.

  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 playing       if (vm.isplaying) return;       //otherwise       vm.isplaying = true;       var time = 0;       (var = 0; < 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 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);   }; 

then stop, cancel of $timeout promises.

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

the demo on plnkr.