循环内部的延迟不起作用
Delay inside for loop not working
我想在我的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
的对象。我想播放对象中的两个视频。
- 我检查了我有多少个视频
- 我使
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])
每个$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上的演示。
$timeout
返回承诺。你可以像这样构建一个递归的承诺链,所以每个下一个视频都会在一段时间后播放。
相关文章:
- jQuery Banner Rotator插件中的延迟设置不起作用
- 角度路由分辨率 - 延迟.拒绝不起作用 - 角度 1 + 打字稿
- 每个循环的 JQuery 延迟对后置请求不起作用
- 延迟加载在引导轮播中不起作用
- 下拉延迟不起作用
- 循环内部的延迟不起作用
- 一种自定义动画 - 延迟不起作用
- 脚本延迟在 IE11 上不起作用
- 延迟链接ajax不起作用
- 为什么javascript setTimeout延迟不起作用,setInterval太慢
- 为什么这个函数在ie7,8(延迟和衰落)上不起作用
- jquery keyup()延迟不起作用
- jQuery fadeOut延迟在页面加载后第一次不起作用
- ajax成功延迟不起作用
- 为什么我的工具提示的延迟时间选项不起作用?
- 延迟加载效果似乎在我的页面上不起作用
- setTimeout延迟不起作用-我做错了什么
- 在发送ajax请求之前延迟不起作用
- 自定义延迟加载函数将数据加载到容器中后,jQuery函数OnClick不起作用
- Javascript延迟不起作用