本文旨在解决在JavaScript函数中正确插入和控制加载指示器（Spinner）的问题。通过利用async/await和Promise.all，确保在异步操作完成前后，加载指示器能够准确显示和隐藏，提升用户体验。文章提供了两种实现方案，并详细解释了其原理和优势，帮助开发者更好地理解和应用异步编程。
在Web开发中，加载指示器（通常是Spinner）用于向用户表明后台正在执行耗时操作。在JavaScript函数中，尤其是在处理异步操作时，正确地显示和隐藏加载指示器至关重要，可以提升用户体验。以下介绍两种常用的实现方案，并分析其优缺点。
使用 async/await 控制加载指示器
async/await是JavaScript中处理异步操作的一种优雅方式。它使得异步代码看起来更像同步代码，易于理解和维护。
代码示例：
立即学习“Java免费学习笔记（深入）”；
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);
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 声明异步函数，允许在函数内部使用 await 关键字。
- await 关键字用于等待一个Promise对象resolve。只有当Promise对象resolve后，才会继续执行后面的代码。
- 在 click 事件处理函数中，首先显示加载指示器，然后使用 await 等待 insertDataToDatabase 函数完成。
- insertDataToDatabase 函数内部的 $.ajax 调用也使用了 await，确保每次Ajax请求完成后，才会进行下一次循环。
注意事项：
- async/await 必须在 async 函数内部使用。
- await 只能等待Promise对象。如果等待的是其他类型的值，会被自动转换为Promise对象。
- 如果 $.ajax 返回的不是 Promise 对象，需要将其包装成 Promise。
使用 Promise.all 并行执行异步操作
如果多个异步操作之间没有依赖关系，可以使用 Promise.all 并行执行，以提高效率。
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
代码示例：
立即学习“Java免费学习笔记（深入）”；
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) => { ... }) 将数据数组转换为一个包含Promise对象的数组。每个Promise对象代表一个Ajax请求。
- Promise.all(promiseArray) 接受一个Promise对象数组作为参数，并返回一个新的Promise对象。
- 只有当数组中所有的Promise对象都resolve后，Promise.all 返回的Promise对象才会resolve。如果其中任何一个Promise对象reject，Promise.all 返回的Promise对象也会立即reject。
- await Promise.all(...) 等待所有Ajax请求完成。
优点：
- 可以并行执行多个异步操作，提高效率。
缺点：
- 如果其中一个异步操作失败，整个 Promise.all 都会失败，可能需要额外的错误处理。
- 并行请求过多可能会导致服务器压力过大。
总结：
选择哪种方案取决于具体的应用场景。如果异步操作之间有依赖关系，或者需要对每个操作的结果进行处理，建议使用 async/await。如果异步操作之间没有依赖关系，且对性能要求较高，可以使用 Promise.all。无论选择哪种方案，都要确保在异步操作完成前后，加载指示器能够准确显示和隐藏，以提供良好的用户体验。
