本文旨在解决在JavaScript函数中正确插入加载动画（Spinner）的问题。通过示例代码，详细讲解如何使用async/await和Promise.all来确保Spinner在数据处理完成前后正确显示和隐藏，避免异步操作导致的显示问题，提升用户体验。
问题背景
在进行数据处理，特别是涉及异步操作（例如Ajax请求）时，为了提升用户体验，通常需要在数据加载或处理过程中显示加载动画（Spinner）。然而，如果处理不当，Spinner的显示和隐藏可能会出现问题，例如Spinner在数据处理完成前就消失，或者一直显示不消失。
使用 async/await 控制流程
async/await 是 JavaScript 中处理异步操作的强大工具，它可以使异步代码看起来更像同步代码，从而更容易理解和维护。要解决Spinner显示问题，关键在于确保在所有异步操作完成后再隐藏Spinner。
以下是一个使用 async/await 的示例：
立即学习“Java免费学习笔记（深入）”；
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = ""; // 显示 Spinner
await insertDataToDatabase(results.data); // 等待数据插入完成
spinner.style.display = "none"; // 隐藏 Spinner
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
for (i = 0; i < data_noheader.length; i++) {
await $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: 'import',
data: data_noheader[i],
},
success: function (response) {},
error: function (response) {},
});
}
}代码解释：
- async function: async 关键字用于声明一个异步函数。
- await: await 关键字用于暂停 async 函数的执行，直到一个 Promise resolve 或 reject。 在这个例子中，await insertDataToDatabase(results.data) 会暂停，直到 insertDataToDatabase 函数完成。同样，在 insertDataToDatabase 函数内部，await $.ajax({...}) 会暂停，直到每个 Ajax 请求完成。
- 事件监听器: 点击 insert 按钮时，首先显示 Spinner，然后调用 insertDataToDatabase 函数，等待该函数完成后，再隐藏 Spinner。
注意事项：
- 确保你的 JavaScript 环境支持 async/await (现代浏览器都支持)。
- 确保你使用的 Ajax 库（例如 jQuery）返回的是 Promise 对象。
使用 Promise.all 并发处理
如果数据插入的顺序不重要，可以使用 Promise.all 来并发执行多个 Ajax 请求，从而提高效率。
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
await insertDataToDatabase(results.data);
spinner.style.display = "none";
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
await Promise.all(
data_noheader.map((row) => {
return $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: "import",
data: row,
},
success: function (response) {},
error: function (response) {},
});
})
);
}代码解释：
- data_noheader.map((row) => { ... }): map 方法用于将 data_noheader 数组中的每个元素（row）转换为一个 Promise 对象，每个 Promise 对象对应一个 Ajax 请求。
- Promise.all([...]): Promise.all 接收一个 Promise 数组，并返回一个新的 Promise。 这个新的 Promise 会在数组中所有的 Promise 都 resolve 后 resolve，或者在数组中任何一个 Promise reject 后 reject。
- 并发请求: Promise.all 允许同时发送多个 Ajax 请求，而不需要等待每个请求完成。 这可以显著提高数据插入的速度。
注意事项：
- 如果数据插入的顺序很重要，则不应该使用 Promise.all。
- 并发请求可能会对服务器造成更大的压力，需要根据实际情况进行调整。
总结
通过使用 async/await 和 Promise.all，可以有效地控制异步操作的流程，确保 Spinner 在数据处理完成前后正确显示和隐藏。选择哪种方法取决于具体的应用场景，如果需要保证顺序，则使用 async/await 逐个处理；如果顺序不重要，则使用 Promise.all 并发处理，提高效率。 无论选择哪种方法，都应该确保正确处理 Promise 的 resolve 和 reject 情况，以避免出现意外错误。
