layer.load() 传 {time: 2000} 可设最长等待2秒后自动关闭,但仅当未被手动关闭时生效;必须保存返回 index 并在业务回调中显式关闭,避免误杀其他 loading 或关不掉。
layer.load() 传 time 参数就能延时关闭
直接在 layer.load() 调用时加 {time: 2000},它就会在 2 秒后自动关闭——不需要额外写 settimeout 或手动调 layer.close()。
注意:这个 time 是「最长等待时间」,不是「固定延迟」。如果 loading 层被提前手动关闭(比如 AJAX 成功后调了 layer.close(index)),那 time 就不会生效。
-
layer.load()默认不带参数 → 样式 0,不自动关 -
layer.load(1, {time: 2000})→ 样式 1,2 秒后自动关 -
layer.load(2, {time: 2000})→ 样式 2,2 秒后自动关 - 不传
time,只靠setTimeout关,容易漏掉失败路径(比如请求报错没进 success)
为什么不能只依赖 layer.closeAll('loading')
它会把当前页面所有 layer.load() 实例全干掉,包括其他模块、组件、甚至第三方插件正在用的 loading 层。一旦出现竞态(比如两个异步请求同时开 loading),就可能误杀别人还没结束的加载状态,导致 UI 行为错乱或报错 Cannot read property 'close' of undefined。
- 只对本业务逻辑负责:用
var index = layer.load(...)拿到返回值,在明确的回调里关(如done、success、error) - 移动端弱网下,
complete钩子有时不触发,time是兜底保障 -
layer.closeAll('loading')适合全局重置场景(如用户主动刷新/退出登录),不适合日常请求控制
常见错误:loading 一直转,关不掉
根本原因几乎都是没保存 layer.load() 的返回值,或者保存了但作用域不对,导致后续调 layer.close() 时找不到那个 index。
- 写在
if或for块内,没提升到外层作用域 →index在回调里是undefined - 多个请求共用一个
index变量 → 后开的覆盖前开的,关错实例 - 用了
layer.load()却没接返回值 → 根本没有索引可关 - 在
async/await函数里忘记await请求,直接往后执行关层逻辑 → 时机错乱
推荐封装一个带延时的 loading 工具函数
避免每次重复写 layer.load(2, {time: 2000}),也防止漏关。尤其当你要在表单提交、按钮点击、表格刷新等多处用到时,统一收口更稳。
function showLoading(time = 2000) {
return layer.load(2, { time });
}
// 使用示例
const loadIndex = showLoading();
$.get('/api/data', function(res) {
layer.close(loadIndex);
// 处理数据...
});
复杂点在于:延时只是保底,真正该关的时机永远取决于业务逻辑完成点。别图省事全靠 time,否则用户看到“加载中”闪一下就没了,却没拿到结果,体验反而更差。


















