本文旨在解决在 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 返回的是一个 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) =youjiankuohaophpcn { 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，才能为用户提供良好的体验。
以上就是JavaScript 函数中插入加载指示器（Spinner）的正确方法的详细内容，更多请关注php javascript java jquery js json ajax ai JavaScript jquery ajax try catch 循环 map 并发 function 对象 promise 异步 display