JavaScript的循環爲進展緩慢的事件監聽器火災

Question

我想根據上傳的進度更改元素背景顏色。我遇到的問題是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"); 
    } 
} 

Answer 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/

Answer 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"); 
    } 
} 

，我認爲沒有必要在這種情況下使用的循環。