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

【问题标题】：How to pass cycle variable to event callback function using Javascript如何使用Javascript将循环变量传递给事件回调函数
【发布时间】：2016-06-28 13:48:58
【问题描述】：

我同时使用 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”值传递给进度回调函数。如果我像这样使用“i”：

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

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

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

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

【问题讨论】：

使用期望 i 值作为参数的 for 循环内容创建一个函数。然后在你的 for 循环中调用该函数。它应该可以工作，因为 i-value 将在没有引用的情况下传递。
使用 let 或像 xhr.addEventListener('progress', (function(i) { return function(e) {console.log(i);} })(i)); 一样使用它

标签： javascript parameters callback cycle

【解决方案1】：

使用xhr.upload.progress 而不是xhr.progress。

创建一个 IIFE，将 i 传递给 IIFE，创建新的 progress 元素，将 className "progress-" 与 i 连接起来，将当前进度元素 .value 更新为 e.loaded 内 upload @9876543333 @ 事件。另见Upload multiple image using AJAX, PHP and jQuery

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
}

jsfiddle https://jsfiddle.net/ytedpcro/1/

【讨论】：