本文旨在解决在 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) => { 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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520176.html
微信扫一扫 
支付宝扫一扫 
