如何使用Javascript将循环变量传递给事件回调函数

我同时使用XMLHttpRequest上传多个文件。我希望每个文件都有自己的进度指示器。所以，当我获得要上传的文件数组时，我会在一个for循环内为每个文件启动上传，比如

for(var i=0; i<files.length; i++)                    
{
  // Create transfer object
  var xhr = new XMLHttpRequest();

  // Attach progress event handler
  xhr.addEventListener('progress', function(e) { showProgress .... });

 ....
}

我总是得到最新的“I”值。如果是这样定义的：

  xhr.addEventListener('progress', function(e) { console.log(i); });

  xhr.addEventListener('progress', (function(i,e) { console.log(i); })(i));

---

我得到了正确的I，但是我从来没有得到事件对象“e”，所以我没有得到实际的进度。定义它的正确方法是什么？

使用

xhr.upload.progress

而不是

xhr.progress

创建一个IIFE，将

i

传递给IIFE，创建新的

progress

元素，该元素具有

className

“progress-”，并将

i

连接在一起，将当前进度元素

.value

更新为

e.loaded

在

上传
progress
事件中。另见

for（var i=0；i创建一个函数，其中for循环内容期望i值作为参数。然后在for循环中调用该函数。它应该可以工作，因为i值将在没有引用的情况下传递。使用let或类似于
xhr.addEventListener（'progress'，（函数（i）{返回函数（e）{console.log（i）；}）（i））；
for(var i=0; i<files.length; i++) {
  // Create transfer object
  (function(curr) {
    // `i` : `curr`
    var xhr = new XMLHttpRequest();
    var progress = document.createElement("progress");
    progress.setAttribute("max", files[curr].size);
    document.body.appendChild(progress);
    progress.className = "progress-" + curr;
    // Attach progress event handler
    xhr.upload.addEventListener("progress", function(e) {
      // update current `progress` `value`
      document.querySelector(".progress-" + curr).value = e.loaded;
    });
    xhr.open("POST", "/path/to/server/");
    xhr.send(new FormData(files[curr]));
  }(i)); // pass `i` to IIFE
}