javascript - 检测到循环计数器变量值错误

Question

我的测试代码:

var imageUploadPreview = function (e) {
  var input = document.getElementById("file"),
      files = e.target.files;

    for (var i = 0; i < files.length; i++) {
        if (input.files) {
            var file = files[i],
                reader = new FileReader();

            reader.onload = function (e) {
                (function (i) {
                    var img = $('<img>').prop('id', 'img_' + i)
                     .prop('src', e.target.result).css({'width':'60px', 'height':'60px'});

                    var div = $('<div>').append(img).append(img.prop('id'))
                    $('body').append(div);
                })(i)
            }
            reader.readAsDataURL(file);
        }
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" id="file" onchange="imageUploadPreview(event)" multiple />

它正在工作，除了:所有图像 ID 都是 img_ + files.length

你能解释一下为什么吗？循环发生了什么？

Answer 1

你几乎已经用 iife 执行 i 了，你需要将它移到 onload 之外。问题是 onload 是异步调用的，所以当它运行时，循环就完成了。这就是为什么 i 是每个文件的最后一个索引。您需要在 onload 运行之前执行 iife。

        reader.onload = function (e) {
            (function (i) {
                var img = $('<img>').prop('id', 'img_' + i)
                 .prop('src', e.target.result).css({'width':'60px', 'height':'60px'});

                var div = $('<div>').append(img).append(img.prop('id'))
                $('body').append(div);
            })(i)
        }

至

(function (i) {
    reader.onload = function (e) {
        var img = $('<img>').prop('id', 'img_' + i)
            .prop('src', e.target.result).css({
                'width': '60px',
                'height': '60px'
            });

        var div = $('<div>').append(img).append(img.prop('id'))
        $('body').append(div);
    }
})(i);