首页 > 网页制作 >Layui表格渲染前Loading文字每秒动态更新

Layui表格渲染前Loading文字每秒动态更新

来源：互联网 2026-06-23 08:26:28

搞定Layui表格的动态loading提示：别在`done`回调里白费功夫很多人尝试通过 `table.render()` 的 `done` 回调来实现渲染前的loading动态更新，但这其实是无效的。因为 `done` 回调是在表格渲染完成后才触发的，与“渲染前”的时间点完全不符。真正的需求场

搞定Layui表格的动态loading提示：别在`done`回调里白费功夫

很多人尝试通过 `table.render()` 的 `done` 回调来实现渲染前的loading动态更新，但这其实是无效的。因为 `done` 回调是在表格渲染完成后才触发的，与“渲染前”的时间点完全不符。真正的需求场景是：当数据请求已发出但尚未返回时，需要让loading提示文字动态更新。实现这一效果的关键，在于从请求发起的瞬间就开始介入控制。 Layui表格渲染前Loading文字每秒动态更新

使用 `beforeSend` 拦截AJAX请求，手动管理loading区域

Layui表格的底层基于 jQuery.ajax，因此支持 `beforeSend` 这个钩子函数。虽然table模块没有直接将其暴露为配置项，但可以通过 `render()` 方法中的 `request` 配置进行传递。具体实现步骤如下：

首先，在表格容器内预先定义一个明确的loading占位元素，例如：加载中…
在 table.render() 的配置中，设置 request 选项，以接管 beforeSend 和 error 回调。
在 beforeSend 回调中启动定时器，每秒更新loading文字；在 error 或 done 回调中清除定时器并隐藏loading元素。

以下是完整的代码示例：


table.render({
  elem: '#demo',
  url: '/api/list',
  request: {
    // 此处参数将透传到内部的 $.ajax 调用
    beforeSend: function(xhr, settings) {
      const loadingEl = $('#table-loading');
      loadingEl.show();
      const timer = setInterval(() => {
        const dots = ['.', '..', '...'];
        const idx = (dots.indexOf(loadingEl.text().trim().slice(-3)) + 1) % 3;
        loadingEl.text('加载中' + dots[idx]);
      }, 1000);
      // 将定时器挂载到 xhr 对象上，便于后续清理
      xhr._loadingTimer = timer;
    }
  },
  done: function(res, curr, count) {
    $('#table-loading').hide();
    if (this.request && this.request.beforeSend) {
      // 清理可能遗留的定时器
      clearInterval(this.request.beforeSend.toString().includes('_loadingTimer') 
        this.request.beforeSend._loadingTimer : null);
    }
  }
});

这里有一个实用技巧：将定时器挂载到 `xhr` 实例上，而不是存入全局变量。这样在后续清理时可以直接通过 `xhr._loadingTimer` 定位，避免多个表格同时存在时相互干扰。

为什么原生的 `loading: true` 配置无法满足需求

许多文档和教程会建议直接开启 `loading: true` 配置。虽然操作简单，但在实际使用中会发现其局限性。 Layui 自带的 `loading: true` 功能只会显示静态的“加载中”文字，既无法自定义文案，也无法实现动态更新。其内部是通过CSS遮罩层和固定文本实现的，没有提供外部控制接口。此外还存在以下问题：

开启 loading: true 后，Layui 会在表格容器内插入一个 .layui-table-loading 元素，但其DOM结构不可预测，且没有提供事件绑定入口。
即使尝试用JavaScript轮询修改该元素的文字，也很容易被Layui内部的重绘操作覆盖，尤其是在触发分页、排序重载时。
原生loading状态无法区分“请求进行中”和“空数据”两种场景，而实际开发中，我们通常需要精确控制“请求已发出、响应未到达”这一时间段。

定时器清理不及时会导致文字持续跳动

这是实现过程中最容易出错的环节。如果请求失败或用户快速切换页面后未及时清理，`setInterval` 定时器会继续运行，导致loading文字持续闪烁，严重时可能引发“Cannot set property ‘text’ of undefined”等错误。需要注意以下几点：

必须在 done、error，以及可能的 before（例如用户取消操作）回调中，都执行 clearInterval 清理定时器。
切勿将定时器存储在全局变量中，否则多个表格共存时会相互干扰。推荐的做法是将其挂载到 xhr 实例或表格实例的私有属性上，例如 this._loadingTimer。
如果使用了 table.reloadData() 方法，在发起新请求前务必先清除旧的定时器，否则会出现多个定时器叠加的混乱情况。

总而言之，要实现可靠的loading动态更新，本质上是绕过Layui自带的loading封装，手动接管请求的生命周期。所有修改loading文字的操作，都必须严格控制在“请求开始”到“请求结束”的时间窗口内，任何时间差都可能导致问题。