我正在嘗試使用 jQuery 的 get 函式加載多個檔案。一個最小的示例如下所示：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select name="file-select" id="file-select" multiple>
<option>http://url.to.file/Test1.txt</option>
<option>http://url.to.file/Test2.txt</option>
</select>
<script>
$(document).ready(function() {
$('#file-select').change(function () {
let loaded_files_list = new Array();
let promise = new Promise(function(myResolve,myReject) {
$("#file-select option:selected").each(function () {
file_name = $(this).val();
$.get($(this).val(), function(response) {
data = response;
// Do something with data
console.log("file select length: " $("#file-select option:selected").length);
loaded_files_list.push(file_name);
console.log('loaded files length: ' loaded_files_list.length)
if(loaded_files_list.length == $("#file-select option:selected").length) {
console.log('Entered if clause');
myResolve(loaded_files_list);
}
else {
myReject('List is not complete yet');
}
});
});
});
promise.then(
function(value) {
console.log('List is complete!');
console.log(value);
},
function(error) {
console.log(error);
}
);
});
});
</script>
</body>
</html>
現在，如果我選擇一個檔案，這就像預期的那樣作業，我可以在控制臺中看到帶有單個專案的串列。但是，如果 II 選擇兩個檔案，則在加載兩個檔案后輸入 if 子句，但似乎myResolve沒有呼叫，因為既不List is complete!顯示也不顯示包含兩個元素的串列。我在這里做錯了什么？
uj5u.com熱心網友回復：
$(document).ready(() => {
// make this a function that "waits" for the await command when
// used on promises
$('#file-select').change(async () => {
// declare an array that we will use to store our HTTP requests
const filesList = [];
// extract the clicked options
const selectedOpts = $('#file-select').children('option:selected')
// loop over the clicked options
selectedOpts.each((index, opt) => {
// extract the text value from the option
const link = opt.text
// push the HTTP request to the filesList array without
// waiting for the response
filesList.push($.get(link))
})
// wait for the HTTP requests to to complete before
// continuing
const responses = await Promise.all(filesList)
// loaded all files
responses.forEach(data => {
console.log(data) // => file contents
})
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467653.html
標籤：javascript jQuery 阿贾克斯
上一篇：根據隱藏的輸入值更新表格單元格