reader.onloadend 调用异步函数 addData 并且 reader.onloadend 处于循环中。
const uploadFiles = () => {
console.log(acceptedFiles)
setLoading(true)
console.log(loading)
let i = 0
let l = acceptedFiles.length
for (i = 0; i < l; i++) {
let file = acceptedFiles[i]
const reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
let buffer = Buffer(reader.result)
console.log(buffer)
addData(file.path, buffer)
}
}
}
这是我的异步函数 addDataasync function addData(name, buffer) {
const file = await myfunction()
}
在调用循环中的所有异步 addData 之后,我想调用 setLoading(false) 。onClick 功能不起作用,当我在所有异步功能完成之前单击按钮时,加载设置为 false。
const [loading, setLoading] = useState(false)
<button onClick={() => {
uploadFiles()
setLoading(false)
}}
disabled={loading}
>
最佳答案
使用 Promise,您可以知道何时读取了所有文件。基本思路如下
const uploadFiles = (evt) => {
// set loading to true;
const acceptedFiles = [...evt.target.files];
// Create a map of promises that will resolve when file is read
const readerPromises = acceptedFiles.map(file => {
return new Promise(resolve => {
const reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
console.log(file);
let buffer = reader; // Buffer(reader.result)
resolve([file.name, buffer])
}
});
});
// Detects when all of the promises are fully loaded
Promise.all(readerPromises).then(results => {
console.log(results);
// set loading to false;
});
};
<input type="file" multiple onchange="uploadFiles(event)" />
关于javascript - 循环中的所有异步调用完成后如何调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66014882/