本文旨在解决在 JavaScript 函数中插入加载指示器（Spinner）时遇到的问题，并提供两种基于 Promise 和 async/await 的解决方案，确保 Spinner 在数据处理完成前后正确显示和隐藏，提升用户体验。通过详细的代码示例和解释，帮助开发者理解异步操作的处理方式，避免常见的同步阻塞问题。
在 JavaScript 中，当执行耗时操作时，为了提升用户体验，通常会使用加载指示器（Spinner）来告知用户程序正在运行。 然而，直接在循环中使用 $.ajax 等异步方法，可能会导致 Spinner 的显示和隐藏与预期不符，例如 Spinner 立即消失，或者在数据处理完成前就消失。 这是因为 $.ajax 默认是异步执行的，循环会立即完成，而不会等待每个 AJAX 请求完成。
以下介绍两种解决该问题的方法：
1. 使用 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 insertDataToDatabase(data): async 关键字声明这是一个异步函数，允许在函数内部使用 await。
- await $.ajax(...): await 关键字会暂停函数的执行，直到 $.ajax 请求完成。 这意味着循环会等待每个 AJAX 请求完成，然后再进行下一次迭代。
- spinner.style.display = ""; 在 insertDataToDatabase 函数调用前显示 Spinner。
- spinner.style.display = "none"; 在 insertDataToDatabase 函数调用完成后隐藏 Spinner。
注意事项：
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
- 确保 $.ajax 返回的是一个 Promise 对象，这样 await 才能正常工作。 在 jQuery 中，$.ajax 默认返回的就是 Promise 对象。
2. 使用 Promise.all()
Promise.all() 接收一个 Promise 对象数组作为输入，并在所有 Promise 对象都 resolve 后 resolve。 这可以用于并行执行多个 AJAX 请求，并等待所有请求完成后再隐藏 Spinner。
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) => { return $.ajax(...) }): map 函数将 data_noheader 数组中的每个元素转换为一个 Promise 对象。
- Promise.all(...): Promise.all() 接收一个 Promise 对象数组，并返回一个新的 Promise 对象，该 Promise 对象在所有输入的 Promise 对象都 resolve 后 resolve。
- await Promise.all(...): await 关键字会暂停函数的执行，直到 Promise.all() 返回的 Promise 对象 resolve。
优点：
- 可以并行执行 AJAX 请求，提高效率。
注意事项：
- 如果任何一个 AJAX 请求失败，Promise.all() 将会 reject，并抛出一个错误。 需要适当处理错误，例如使用 try...catch 块。
- 并行发送大量请求可能会对服务器造成压力，需要根据实际情况控制并发数量。
总结
以上两种方法都可以解决在 JavaScript 函数中插入加载指示器（Spinner）时遇到的问题。 async/await 方式更易于理解和调试，而 Promise.all() 方式可以并行执行 AJAX 请求，提高效率。 根据实际情况选择合适的方法。 记住，理解异步编程的概念是解决此类问题的关键。 确保在异步操作完成之后才隐藏 Spinner，才能为用户提供良好的体验。
