使用 jQuery 实现可复用的按钮加载状态功能-js教程-PHP中文网

使用 jQuery 实现可复用的按钮加载状态功能

聖光之護

发布： 2025-10-12 09:42:15

原创

688人浏览过

使用 jQuery 实现可复用的按钮加载状态功能

本教程将指导您如何使用 jQuery 和 Font Awesome 创建一个可复用的 JavaScript 函数，以在表单提交时为按钮显示加载动画并禁用按钮，从而提升用户体验和防止重复提交。通过此方法，您可以轻松地将加载状态功能应用于各种表单按钮，实现一致且专业的交互效果。

在网页开发中，当用户提交表单或执行耗时操作时，提供即时反馈至关重要。显示加载动画并禁用相关按钮可以有效防止用户重复提交，同时告知用户系统正在处理请求，从而显著提升用户体验。本文将详细介绍如何利用 jquery 和 font awesome 实现一个可复用的按钮加载状态功能。

1. 准备工作：引入必要的库和HTML结构

首先，确保您的页面中已引入 jQuery 库和 Font Awesome 图标库，它们是实现此功能的基础。接着，为您的提交按钮添加一个 Font Awesome 加载图标，并默认将其隐藏。

HTML 结构示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <label for="Mobile">手机号码</label>
    <input id="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin hide"></i> 保存
    </button>
  </div>
</form>

登录后复制

关键点说明：

<i class="fa fa-refresh fa-spin hide"></i>：这是一个 Font Awesome 的刷新图标，fa-spin 类使其旋转，hide 类则用于初始隐藏。
btn-sabt：这是一个自定义类，用于 jQuery 选择器定位按钮。

2. 定义 CSS 样式

为了控制加载图标的显示与隐藏，我们需要一个简单的 CSS 类来切换 display 属性。

CSS 样式示例：

.hide {
  display: none !important; /* 使用 !important 确保覆盖其他样式 */
}

登录后复制

3. 创建可复用的 JavaScript 加载器函数

核心功能是一个名为 toggleLoader 的 JavaScript 函数，它负责根据传入的参数来显示或隐藏加载图标，并禁用或启用按钮。

JavaScript 代码示例：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

/**
 * 切换按钮的加载状态。
 * @param {boolean} show - 如果为 true，显示加载器并禁用按钮；如果为 false，隐藏加载器并启用按钮。
 */
const toggleLoader = show => {
  // 假设所有需要控制加载状态的按钮都带有 '.btn-sabt' 类
  $('.btn-sabt')
    // .toggleClass('submit-btn', show) // 如果需要根据状态切换其他类，可以取消注释
    .prop('disabled', show) // 禁用或启用按钮
    .find('i').toggleClass('hide', !show); // 切换加载图标的显示/隐藏
};

登录后复制

函数解析：

toggleLoader(show) 接收一个布尔值 show。
$('.btn-sabt')：选择所有带有 btn-sabt 类的按钮。
.prop('disabled', show)：当 show 为 true 时，设置 disabled 属性为 true（禁用按钮）；当 show 为 false 时，设置 disabled 为 false（启用按钮）。
.find('i').toggleClass('hide', !show)：找到按钮内部的 <i> 标签（即加载图标），并根据 !show 的值来切换 hide 类。当 show 为 true 时，!show 为 false，移除 hide 类（显示图标）；当 show 为 false 时，!show 为 true，添加 hide 类（隐藏图标）。

4. 将加载器集成到表单提交事件中

现在，我们将 toggleLoader 函数集成到表单的提交事件中。

JavaScript 代码示例：

$(function() {
  $('#MobileUserForm').on('submit', (event) => {
    event.preventDefault(); // 阻止表单的默认提交行为

    toggleLoader(true);  // 显示加载器并禁用按钮

    // 在此处执行您的异步任务，例如 AJAX 请求
    // 示例：模拟一个异步操作，实际应用中替换为您的 AJAX 调用
    setTimeout(() => {
      toggleLoader(false); // 任务完成后，隐藏加载器并启用按钮
      // 例如，可以在这里处理 AJAX 响应，如显示成功消息或错误信息
    }, 3000); // 模拟3秒延迟
  });
});

登录后复制

集成步骤说明：

$(function() { ... });：确保 DOM 完全加载后再执行 JavaScript 代码。
$('#MobileUserForm').on('submit', (event) => { ... });：监听 ID 为 MobileUserForm 的表单的提交事件。
event.preventDefault();：这是非常重要的一步，它阻止了浏览器默认的表单提交行为（如页面刷新），以便我们能通过 JavaScript 控制提交过程。
toggleLoader(true);：在异步任务开始前调用，显示加载动画并禁用按钮。
setTimeout(() => { toggleLoader(false); }, 3000);：这是一个模拟异步任务的示例。在实际应用中，您应该将 toggleLoader(false); 放置在您的 AJAX 请求的 success、error 或 complete 回调函数中，确保在任务真正结束时才移除加载状态。

5. 注意事项与最佳实践

异步操作的正确处理： 确保 toggleLoader(false) 在实际的异步操作（如 AJAX 请求）成功或失败后才被调用。如果您的 AJAX 请求是使用 $.ajax()、fetch 或 axios 等库，请将其放在 done()、fail() 或 finally() 回调中。
用户体验： 除了加载动画，还可以考虑在加载期间添加一个半透明的遮罩层，以防止用户与页面其他部分进行不必要的交互。

可复用性扩展： 当前 toggleLoader 函数硬编码了 .btn-sabt 选择器。为了更强的复用性，您可以修改函数，使其接受一个按钮元素或选择器作为参数：

const toggleLoaderGeneric = (buttonSelector, show) => {
  $(buttonSelector)
    .prop('disabled', show)
    .find('i').toggleClass('hide', !show);
};
// 使用示例：
// toggleLoaderGeneric('#MobileUserForm .btn-sabt', true);
// toggleLoaderGeneric('#AnotherForm button[type="submit"]', false);

登录后复制

错误处理： 在异步请求失败时，不仅要隐藏加载器，还应该向用户显示适当的错误消息。
无障碍性（Accessibility）： 对于屏幕阅读器用户，可以考虑在按钮禁用时添加 aria-busy="true" 或 aria-live="assertive" 等 ARIA 属性，提供更友好的体验。