JavaScript正确添加Spinner方法

还在为 JavaScript 函数中插入 Spinner（加载指示器）而烦恼吗？本文为你提供两种经过验证的解决方案，助你轻松解决 Spinner 显示与隐藏的问题，显著提升用户体验。**JavaScript 插入 Spinner 的正确方法**是什么？本文将深入探讨如何利用 `async/await` 和 `Promise.all` 有效管理异步操作，确保 Spinner 在数据处理过程中准确显示，并在完成后立即隐藏。通过详细的代码示例，我们将一步步指导你如何实现 Spinner 的无缝集成，让你的 Web 应用更具专业性，更易于用户理解和操作。告别加载时的空白等待，立即学习如何正确插入 Spinner，提升你的 JavaScript 技能！

本文旨在解决在 JavaScript 函数中插入 Spinner（加载指示器）时遇到的问题，并提供两种基于 Promise 和 async/await 的解决方案，确保 Spinner 在数据处理期间正确显示，并在处理完成后隐藏，从而提升用户体验。通过示例代码，详细讲解了如何利用 async/await 以及 Promise.all 来管理异步操作，保证 Spinner 的正确显示和隐藏。

在 JavaScript 中，经常需要在执行耗时操作时显示一个 Spinner，以告知用户程序正在运行。一个常见的场景是在数据插入数据库时。然而，由于 JavaScript 的异步特性，直接控制 Spinner 的显示和隐藏可能会遇到问题。以下介绍两种解决方案，利用 async/await 和 Promise.all 来确保 Spinner 的正确显示和隐藏。

使用 async/await 控制 Spinner

async/await 使得异步代码看起来更像同步代码，从而更容易理解和维护。通过将 insertDataToDatabase 函数声明为 async，并在 $.ajax 调用前使用 await，可以确保 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);

  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) {},
    });
  }
}

代码解释：

1. 事件监听器: 监听 id 为 insert 的元素的点击事件。
2. async 函数: 事件处理函数被声明为 async，允许使用 await 关键字。
3. 显示 Spinner: 点击事件发生后，首先显示 id 为 spinner 的元素。
4. await insertDataToDatabase(results.data): 调用 insertDataToDatabase 函数，并使用 await 等待其完成。await 确保 JavaScript 引擎暂停执行，直到 insertDataToDatabase 函数返回一个 resolved 的 Promise。
5. 隐藏 Spinner: insertDataToDatabase 函数完成后，隐藏 Spinner。
6. insertDataToDatabase 函数: 循环遍历数据，并对每个数据项发起 $.ajax 请求。
7. await $.ajax(...): 在 $.ajax 调用前使用 await，确保每次请求都完成后再进行下一次循环。

注意事项：

• 确保 $.ajax 返回一个 Promise 对象，以便 await 能够正常工作。jQuery 的 $.ajax 默认返回 Promise。
• async/await 只能在 async 函数中使用。

使用 Promise.all 并行处理数据

如果数据插入的顺序不重要，可以使用 Promise.all 来并行处理数据，提高效率。

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) {},
    });
  }));
}

代码解释：

1. data_noheader.map((row) => { ... }): 使用 map 方法将 data_noheader 数组中的每个元素转换为一个 Promise 对象。每个 Promise 对象代表一个 $.ajax 请求。
2. Promise.all(...): Promise.all 接收一个 Promise 数组，并返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都 resolved 时才 resolve。
3. await Promise.all(...): 使用 await 等待 Promise.all 返回的 Promise resolve，确保所有 $.ajax 请求都完成后才继续执行。

优点：

• 并行处理数据，提高效率。

注意事项：

• 如果任何一个 $.ajax 请求失败，Promise.all 返回的 Promise 将 reject，并抛出一个错误。你需要适当地处理错误。
• 如果对数据插入的顺序有要求，不应使用 Promise.all。

总结

以上两种方法都能够有效地在 JavaScript 函数中插入 Spinner，并确保 Spinner 在数据处理期间正确显示，并在处理完成后隐藏。选择哪种方法取决于你的具体需求。如果需要保证数据插入的顺序，使用 async/await 逐个处理；如果数据插入的顺序不重要，使用 Promise.all 并行处理可以提高效率。在实际开发中，根据具体情况选择合适的方案，能够更好地提升用户体验。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~