Javascript For Loop为事件侦听器触发而减慢进度

我正在尝试根据上传的进度更改元素背景颜色。我遇到的问题是，与启动的progress事件侦听器相比，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");
    }
}

var颜色=[
“#fff2f2”，
“#ffe6e6”，
“#ffd9d9”，
“#ffcccc”，
“#ffbfbf”，
“#ffb3b3”，
“#ff9999”，
“#ff7373”，
“#ff8080”，
“#ff5959”，
“#ff4d”，
“#ff4040”，
“#ff3333”，
“#ff2626”，
“#ff1919”，
“#ff0d0d”，
“#ff0000”，
]
var first=0；
var last=5；
var xhr=new XMLHttpRequest（）；
addEventListener（“progress”，updateProgress，false）；
var foo=document.getElementById（“uploadScreen”）；
var form=document.getElementById（“uploadForm”）；
var完成百分比；
open（“POST”，“php/upload.php”，true）；
xhr.send（新表单数据（表单））；
函数updateProgress（事件）{
if（事件长度可计算）{
完成百分比=数学轮（event.loaded/event.total*100）；
对于（i=0；i第一个和完成百分比<最后一个）{
log（foo.style.backgroundColor=colors[i]）；
打破
}
}
第一个=第一个+5；
last=last+5；
}否则{
警告（“否”）；
}
}

不要将整数作为百分比，而是将其作为介于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];

---

不要将整数作为百分比，而是将其作为介于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];

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

---

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

for循环在每次迭代中都进行精确比较的点是什么？for循环在每次迭代中都进行精确比较的点是什么？哇，这是一个很棒的数学公式！非常感谢你！我从来没有想过会这样。哇，这是一个很棒的数学公式！非常感谢你！我从没想过会这样。