JavaScript函数中插入加载动画（Spinner）的正确姿势

本文旨在解决在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) {},
    });
  }
}

代码解释：

AssemblyAI

转录和理解语音的AI模型

65

查看详情

1. async function: async 关键字用于声明一个异步函数。
2. await: await 关键字用于暂停 async 函数的执行，直到一个 Promise resolve 或 reject。 在这个例子中，await insertDataToDatabase(results.data) 会暂停，直到 insertDataToDatabase 函数完成。同样，在 insertDataToDatabase 函数内部，await $.ajax({...}) 会暂停，直到每个 Ajax 请求完成。
3. 事件监听器: 点击 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) {},
      });
    })
  );
}

代码解释：

1. data_noheader.map((row) =youjiankuohaophpcn { ... }): map 方法用于将 data_noheader 数组中的每个元素（row）转换为一个 Promise 对象，每个 Promise 对象对应一个 Ajax 请求。
2. Promise.all([...]): Promise.all 接收一个 Promise 数组，并返回一个新的 Promise。 这个新的 Promise 会在数组中所有的 Promise 都 resolve 后 resolve，或者在数组中任何一个 Promise reject 后 reject。
3. 并发请求: Promise.all 允许同时发送多个 Ajax 请求，而不需要等待每个请求完成。 这可以显著提高数据插入的速度。

注意事项：

• 如果数据插入的顺序很重要，则不应该使用 Promise.all。
• 并发请求可能会对服务器造成更大的压力，需要根据实际情况进行调整。

总结

通过使用 async/await 和 Promise.all，可以有效地控制异步操作的流程，确保 Spinner 在数据处理完成前后正确显示和隐藏。选择哪种方法取决于具体的应用场景，如果需要保证顺序，则使用 async/await 逐个处理；如果顺序不重要，则使用 Promise.all 并发处理，提高效率。 无论选择哪种方法，都应该确保正确处理 Promise 的 resolve 和 reject 情况，以避免出现意外错误。

以上就是JavaScript函数中插入加载动画（Spinner）的正确姿势的详细内容，更多请关注php中文网其它相关文章！