本文旨在解决在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) =youjiankuohaophpcn { … }): 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 情况，以避免出现意外错误。
以上就是JavaScript函数中插入加载动画（Spinner）的正确姿势的详细内容，更多请关注php javascript java jquery js json ajax 浏览器 工具 ai 并发请求 JavaScript jquery ajax map 并发 function 对象 事件 promise 异步