在javascript中应该如何处理多个进度条
我有许多进度条,每个进度条都绑定到一个div,使用“settimeout”更新 其运行方式的示例如下所示:在javascript中应该如何处理多个进度条,javascript,Javascript,我有许多进度条,每个进度条都绑定到一个div,使用“settimeout”更新 其运行方式的示例如下所示: myDiv._timer = setTimeout(function () { func_name(data) }, 1); 编辑:根据要求,我的一个进度条的工作示例: 然而,问题是,我有多个带有进度条的div,它们有自己的数据用于计算进度。也就是说,如果5个在路上,我会有5个不同的超时 我不是javascript方面的专家,但肯定有一种方法可以将
myDiv._timer = setTimeout(function () {
func_name(data)
}, 1);
编辑:根据要求,我的一个进度条的工作示例:
然而,问题是,我有多个带有进度条的div,它们有自己的数据用于计算进度。也就是说,如果5个在路上,我会有5个不同的超时
我不是javascript方面的专家,但肯定有一种方法可以将此结构与所有进度条的一次暂停联系起来,或者我目前的方法是最好的方法吗
注意:我不使用jQuery。我更喜欢使用香草javascript来学习 检查此项: 我创建了一个包含容器id及其增量值的对象数组
// array to maintain progress bars
var pbArr = [{
pid: 'bar1', // parent container id
incr: 1 // increment value
}, {
pid: 'bar2',
incr: 2
}, {
pid: 'bar3',
incr: 3
}, {
pid: 'bar4',
incr: 4
}, {
pid: 'bar5',
incr: 5
}];
然后调用一个函数来创建一个进度条
var loopCnt = 1; // loop count to maintain width
var pb_timeout; // progress bar timeout function
// create progress bar function
var createPB = function () {
var is_all_pb_complete = true; // flag to check whether all progress bar are completed executed
for (var i = 0; i < pbArr.length; i++) {
var childDiv = document.querySelector('#' + pbArr[i].pid + ' div'); // child div
var newWidth = loopCnt * pbArr[i].incr; // new width
if (newWidth <= 100) {
is_all_pb_complete = false;
childDiv.style.width = newWidth + '%';
} else {
childDiv.style.width = '100%';
}
}
if (is_all_pb_complete) { // if true, then clear timeout
clearTimeout(pb_timeout);
return;
}
loopCnt++; // increment loop count
// recall function
pb_timeout = setTimeout(function () {
createPB();
}, 1000);
}
// call function to initiate progress bars
createPB();
var loopCnt=1;//循环计数以保持宽度
变量pb_超时;//进度条超时功能
//创建进度条功能
var createPB=函数(){
var是\u all\u pb\u complete=true;//用于检查是否已执行所有进度条的标志
对于(变量i=0;i 如果(newWidth,为什么不给我们一个JSFIDLE示例,让我们看看它的工作情况?关于我的一个进度条?是的,请这样做会很有帮助:)@HanletEscaño你说的“将此结构绑定到一次超时”是什么意思?你希望他们基于完成工作的单个项目加载,还是基于估计?第一个更希望某种形式的事件处理,第二个是静态动画计时器。这不就是将其限制为仅5个进度条吗?如果我添加更多进度条,我该如何进行加载如果他们的id是唯一的,你可以在id的帮助下添加多个进度条。如果你关心它,那么你可以向每个进度条添加一个类,并使用它来检测进度条。