JavaScript 函数中插入加载指示器（Spinner）的正确方法

本文旨在解决在 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。

注意事项：

Poe

Quora旗下的对话机器人聚合工具

297

查看详情

• 确保 $.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 请求，提高效率。

注意事项：

Poe

Quora旗下的对话机器人聚合工具

297

查看详情

• 如果任何一个 AJAX 请求失败，Promise.all() 将会 reject，并抛出一个错误。 需要适当处理错误，例如使用 try...catch 块。
• 并行发送大量请求可能会对服务器造成压力，需要根据实际情况控制并发数量。

总结

以上两种方法都可以解决在 JavaScript 函数中插入加载指示器（Spinner）时遇到的问题。 async/await 方式更易于理解和调试，而 Promise.all() 方式可以并行执行 AJAX 请求，提高效率。 根据实际情况选择合适的方法。 记住，理解异步编程的概念是解决此类问题的关键。 确保在异步操作完成之后才隐藏 Spinner，才能为用户提供良好的体验。

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