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

本文旨在解决在JavaScript函数中正确插入和控制加载指示器（Spinner）的问题。通过利用async/await和Promise.all，确保在异步操作完成前后，加载指示器能够准确显示和隐藏，提升用户体验。文章提供了两种实现方案，并详细解释了其原理和优势，帮助开发者更好地理解和应用异步编程。

在Web开发中，加载指示器（通常是Spinner）用于向用户表明后台正在执行耗时操作。在JavaScript函数中，尤其是在处理异步操作时，正确地显示和隐藏加载指示器至关重要，可以提升用户体验。以下介绍两种常用的实现方案，并分析其优缺点。

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

代码解释：

1. async function 声明异步函数，允许在函数内部使用 await 关键字。
2. await 关键字用于等待一个Promise对象resolve。只有当Promise对象resolve后，才会继续执行后面的代码。
3. 在 click 事件处理函数中，首先显示加载指示器，然后使用 await 等待 insertDataToDatabase 函数完成。
4. insertDataToDatabase 函数内部的 $.ajax 调用也使用了 await，确保每次Ajax请求完成后，才会进行下一次循环。

注意事项：

• async/await 必须在 async 函数内部使用。
• await 只能等待Promise对象。如果等待的是其他类型的值，会被自动转换为Promise对象。
• 如果 $.ajax 返回的不是 Promise 对象，需要将其包装成 Promise。

使用 Promise.all 并行执行异步操作

如果多个异步操作之间没有依赖关系，可以使用 Promise.all 并行执行，以提高效率。

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

2114

查看详情

代码示例：

立即学习“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);

  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 { ... }) 将数据数组转换为一个包含Promise对象的数组。每个Promise对象代表一个Ajax请求。
2. Promise.all(promiseArray) 接受一个Promise对象数组作为参数，并返回一个新的Promise对象。
3. 只有当数组中所有的Promise对象都resolve后，Promise.all 返回的Promise对象才会resolve。如果其中任何一个Promise对象reject，Promise.all 返回的Promise对象也会立即reject。
4. await Promise.all(...) 等待所有Ajax请求完成。

优点：

• 可以并行执行多个异步操作，提高效率。

缺点：

• 如果其中一个异步操作失败，整个 Promise.all 都会失败，可能需要额外的错误处理。
• 并行请求过多可能会导致服务器压力过大。

总结：

选择哪种方案取决于具体的应用场景。如果异步操作之间有依赖关系，或者需要对每个操作的结果进行处理，建议使用 async/await。如果异步操作之间没有依赖关系，且对性能要求较高，可以使用 Promise.all。无论选择哪种方案，都要确保在异步操作完成前后，加载指示器能够准确显示和隐藏，以提供良好的用户体验。

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