6

我有许多进度条，每个进度条都与一个使用“setTimeouts”更新的 div 相关联。

它如何运行的一个例子是这样的：

myDiv._timer = setTimeout(function () {
            func_name(data)
        }, 1);

编辑：按要求提供我的一个进度条的工作示例：http: //jsfiddle.net/H4SCr/

然而问题是，我有多个带有进度条的 div，它们有自己的数据来计算进度。这意味着在旅途中说 5 我有 5 个不同的超时运行。

我不是 javascript 方面的专家，但肯定有一种方法可以将其构建为所有进度条的一次超时，或者我目前的方法是最好的方法吗？

注意：我不使用 jQuery。我更喜欢只用香草 javascript 来学习！

4

1 回答 1

3

看看这个：http: //jsfiddle.net/MZc8X/11/

我创建了一个对象数组，其中包含容器 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();

希望对你有帮助。

于 2013-08-11T07:39:36.560 回答