Javascript For循环减慢进度事件侦听器触发答案

【问题标题】：Javascript For Loop To Slow for Progress Event Listener FireingJavascript For循环减慢进度事件侦听器触发
【发布时间】：2012-10-29 09:09:12
【问题描述】：

我正在尝试根据上传进度更改元素背景颜色。我遇到的问题是，与触发的进度事件侦听器相比，for 循环速度较慢。对此我有什么办法吗？

var colors = [
    "#fff2f2",
"#ffe6e6",
"#ffd9d9",
"#ffcccc",
"#ffbfbf",
"#ffb3b3",
"#ff9999",
"#ff7373",
"#ff8080",
"#ff5959",
"#ff4d4d",
"#ff4040",
"#ff3333",
"#ff2626",
"#ff1919",
"#ff0d0d",
"#ff0000",
]

var first = 0;
var last = 5;
var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", updateProgress, false);

var foo = document.getElementById("uploadScreen");
var form = document.getElementById("uploadForm");
var percentComplete;

xhr.open("POST", "php/upload.php", true);
xhr.send(new FormData(form));

function updateProgress(event) {
    if (event.lengthComputable) {
        percentComplete = Math.round(event.loaded / event.total * 100);
        for (i=0; i < colors.length; i++) {
            if (percentComplete > first && percentComplete < last ) {
                console.log(foo.style.backgroundColor = colors[i]);
                break;
            }
        }
        first = first +5;
        last = last +5;
    } else {
        alert("no no");
    }
}

【问题讨论】：

for 循环的意义何在，它会在每次迭代时进行精确比较？

标签： javascript for-loop upload progress xmlhttprequest-level2

【解决方案1】：

不要将整数作为百分比，而是将其保留为 0 到 1 之间的值。然后将其乘以数组的长度即可获得正确的索引。

var percentComplete = event.loaded / event.total;
var index = Math.round(percentComplete * (colors.length - 1)); // Subtract 1 to account for zero based indexing
foo.style.backgroundColor = colors[index];

http://jsfiddle.net/h6bsU/

【讨论】：

哇，这是一个很棒的数学公式！太感谢了！我从来没有这样想过。

【解决方案2】：

var colors = [
    "#fff2f2",
"#ffe6e6",
"#ffd9d9",
"#ffcccc",
"#ffbfbf",
"#ffb3b3",
"#ff9999",
"#ff7373",
"#ff8080",
"#ff5959",
"#ff4d4d",
"#ff4040",
"#ff3333",
"#ff2626",
"#ff1919",
"#ff0d0d",
"#ff0000",
]

var first = 0;
var last = 5;
var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", updateProgress, false);

var foo = document.getElementById("uploadScreen");
var form = document.getElementById("uploadForm");
var percentComplete;

xhr.open("POST", "php/upload.php", true);
xhr.send(new FormData(form));

function updateProgress(event) {
    if (event.lengthComputable) {
        percentComplete = Math.round(event.loaded / event.total * 100);
        var i=praseInt(percentComplete/5);
        console.log(foo.style.backgroundColor = colors[i]);
    } else {
        alert("no no");
    }
}

我认为这种情况下没有必要使用 for 循环。

【讨论】：