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

### 搞定Layui表格的动态loading提示：别在`done`回调里白费功夫 很多人试图用 `table.render()` 的 `done` 回调来实现渲染前的loading动态更新，但实际上这个方法根本行不通——`done` 只在渲染完成后才触发，跟“渲染前”这个时间节点完全不搭边。 真正的需求是：请求已经发出，数据尚未返回，这时需要让loading文字“动”起来，给用户实时反馈。要做到这一点，必须在请求发起的瞬间立刻介入，而不是等到渲染结束。 #### 用 `beforeSend` 拦截AJAX，手动接管loading区域 Layui的表格底层本质上是 jQuery.ajax，因此它支持 `beforeSend` 这个钩子。虽然table模块没有直接暴露这个参数，但完全可以在 `render()` 的 `request` 配置里悄悄传进去。 具体操作步骤如下： 1. 先在表格容器中放置一个明确的loading占位元素，例如：`

加载中…

` 2. 在 `table.render()` 里配置 `request`，将 `beforeSend` 和 `error` 全部接管 3. `beforeSend` 中启动一个定时器，每秒更新一次loading文字；`error` 或 `done` 中清除定时器并隐藏loading 下面是完整的代码示例： ```js 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); // 把 timer 挂到 xhr 上，方便后续清理 xhr._loadingTimer = timer; } }, done: function(res, curr, count) { $('#table-loading').hide(); if (this.request && this.request.beforeSend) { // 清理可能残留的 timer 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结构不可预测，也没有任何事件绑定入口 - 即便你用JS反复轮询去修改那个元素的文字，也很容易被Layui内部的重绘覆盖——尤其在分页、排序触发重载的时候 - 原生loading分不清“请求中”和“空数据”这两个状态，而实际场景中，你真正需要的是“请求已发出、响应还未到达”这个精确的时间窗口 #### 定时器清理不及时，文字会一直跳动 这是最容易出问题的地方。如果请求失败或者用户快速切换页面后，`setInterval` 还在运行，会导致loading文字持续闪烁，严重时甚至会报错“Cannot set property ‘text’ of undefined”。 几个必须注意的关键点： - 在 `done`、`error` 以及可能出现的 `before`（例如用户点击取消按钮）等三处，都要执行 `clearInterval` - 绝对不要把timer存在全局变量里——多个表格共存时会互相干扰。推荐的做法是挂到 `xhr` 实例或者表格实例的私有属性上，比如 `this._loadingTimer` - 如果使用了 `table.reloadData()`，在新请求发起之前一定要先清除旧的timer，否则会出现多个定时器叠加的混乱局面 说到底，真正可靠的loading动态更新，本质上是绕过Layui自带的loading封装，自己接管请求的生命周期。所有“改文字”的操作，必须严格绑定在“请求开始”与“请求结束”之间，差一秒都可能出问题。