JSHint警告:在引用外部作用域变量的循环中声明的函数可能会导致语义混乱.(文档，读者)

Question

我刚刚在我的项目上设置了JSHint，它警告我：

Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (document, reader)

我如何重新安排下面的代码来解决这个问题并让JSHint满意？

我写信给ES6规范

const imageUploadPreview = document.getElementById('image-upload-preview');

for (const file of files) {
let reader = new FileReader();
reader.readAsDataURL(files[i]);
reader.onloadend = () => {
let previewDiv = document.createElement('div');
previewDiv.style.backgroundImage = 'url(' + reader.result + ')';
imageUploadPreview.append(previewDiv);
};
}

更新

根据鲁本下面的回答，我得出了以下结论：

const imageUploadPreview = document.getElementById('image-upload-preview');
function processFile(file) {
if (file === undefined) {
return;
}
let reader = new FileReader();
reader.onloadend = () => {
let previewDiv = document.createElement('div');
previewDiv.style.backgroundImage = 'url(' + reader.result + ')';
imageUploadPreview.append(previewDiv);
};
reader.readAsDataURL(file);
}
for (const file of files) {
processFile(file);
}

这通过了所有的JSHints测试，并按照我以前的代码工作。

托尼。

Answer 1

您可以通过递归重复使用Filereader来避免循环，就像他们在这里所做的那样：

const imageUploadPreview = document.getElementById('image-upload-preview');
processFile(fileList) {
const file = fileList.pop();
if (file === undefined) {
return;
}
reader.onloadend = () => {
let previewDiv = document.createElement('div');
previewDiv.style.backgroundImage = 'url(' + reader.result + ')';
imageUploadPreview.append(previewDiv);

// Call the next function in the recursion
processFile(fileList);
};
reader.readAsDataURL(files[i]);
}
processFile(files);