尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Codex 写列表时,加载状态为什么不是加一个 loading 就够
“loading 加了吗?加了。”这是交接任务时最常听到的一句答复。但列表页的“加载中”从来不是一件事。首次进入页面要等首屏数据,翻页和查询要等表格数据,点保存要等提交结果。这三个“忙”发生在不同时刻,持续不同时间,也由不同动作结束。如果它们共用一个布尔值,麻烦就从这个共享点开始。一个 loading 值,其实背了三种不同的等待页面级的等待,起点是页面挂载,终点是首屏数据就绪。它要挡住的是整页空白,遮罩一关,页面就完整了。表格的等待,起点是某次查询、翻页或刷新,终点是这一批数据返回。它只关心表格区域,页面其它部分早就能用。按钮的等待,起点是用户点击,终点是这次提交的响应。它最担心的不是页面空不空,而是用户手快连点两次。三个等待的生命周期各不相同。共用loading时,任意一个请求结束都会把遮罩关掉,另外两个还在等的请求就失去了提示,或者更糟——它们自己也被顺手判成了“已完成”。第一种错位:谁先回来谁关灯两个列表请求并发时,遮罩只开了一次,却可能被第一个返回的请求提前关闭。假设进入页面触发首屏查询,用户又立刻点了翻页。首屏请求还在飞,翻页请求也发出去了。响应拦截器在任意请求 settle 时统一把loading置 false,那么翻页先回来,遮罩就关了,首屏数据其实还没到。当前web-skills的请求封装里,loading、dialogLoading、btnState三个状态在响应拦截器里是同时被关闭的。这带来一个判断点:当两个请求共享同一个全局 loading 时,先返回的请求会替后返回的请求关灯。封装本身没错,错在没有为“同一时刻可能有多份等待”留出计数或归属。第二种错位:旧响应关掉了新请求的提示翻页两次,第一次的请求慢,第二次的快。第二次返回、数据已经提交到表格,遮罩也关了;随后第一次的旧响应返回,又把全局 loading 设回 false。/
RELATED

相关推荐

光刻机产能优化:曝光节拍的瓶颈分析

光刻机产能优化:曝光节拍的瓶颈分析

一、痛点背景:从一次真实的生产事故说起光刻机产能优化:曝光节拍的瓶颈分析这个问题,在FAB里不是一天两天了。我见过太多工程师踩坑:要么是方法用错导致数据误判,要么是工具选型失误导致项目延期,要么是流程…

📅 2026/9/9 16:07:46
良率与工艺窗口:为什么要留足margin

良率与工艺窗口:为什么要留足margin

一、痛点背景:从一次真实的生产事故说起 良率与工艺窗口:为什么要留足margin这个问题,在FAB里不是一天两天了。我见过太多工程师踩坑:要么是方法用错导致数据误判,要么是工具选型失误导致项目延期,要么是流程设计有缺陷导致资源浪费。更要命的是,这些坑往往不是技术本身…

📅 2026/9/1 2:01:02
怀旧游戏神器!安卓Java模拟器重温经典

怀旧游戏神器!安卓Java模拟器重温经典

它是一款java模拟器安卓版, 属java游戏模拟平台, 深受小朋友们的喜爱, 它能汇集海量游戏资源, 游戏类型繁多, 能靠众多游戏类型满足每位玩家需求, 它卓越兼容性确保游戏流畅运行, 给用户带来极致游戏享受, 令小编佩服的是, 该软件凭借现代硬件技术, 对游戏图形做了全面优化, 让…

📅 2026/9/15 10:09:14
MORE NEWS

更多资讯

📰

Warp Async Find:把终端查找移出主线程的增量式流式搜索架构

桌面应用开发者工具人工智能AI 应用AI Agent代码智能体 【免费下载链接】warp Warp is an agentic development environment, born out of the terminal. 项目地址: https://gitcode.com/GitHub_Trending/wa/warp 点击查看 免费下载 导读 本篇技术指南围绕 Warp 终…

📰

Warp 设置文件离线编辑检测:基于内容哈希的本地/云端配置冲突仲裁方案

桌面应用开发者工具人工智能AI 应用AI Agent代码智能体 【免费下载链接】warp Warp is an agentic development environment, born out of the terminal. 项目地址: https://gitcode.com/GitHub_Trending/wa/warp 点击查看 免费下载 本篇技术指南深入解析 Warp&…

📰

Brunch with Chaplin 骨架项目实战指南:基于 Brunch 与 Chaplin 的 HTML5 应用脚手架

构建工具前端 【免费下载链接】brunch 🍴 Web applications made easy. Since 2011. 项目地址: https://gitcode.com/gh_mirrors/br/brunch 点击查看 免费下载 本指南以当前仓库 packages/skeletons/brunch-with-chaplin 中的 README 为骨架&#xff0c…

📰

用 Range 头拆分大响应:基于 http-api-design 的 HTTP API 分页与部分内容设计指南

API设计教程 【免费下载链接】http-api-design HTTP API design guide extracted from work on the Heroku Platform API 项目地址: https://gitcode.com/gh_mirrors/ht/http-api-design 点击查看 免费下载 导读 本指南源自开源仓库 http-api-design(即…

📰

VCR 请求匹配进阶:用 uri_without_param 忽略非确定性查询参数

测试开发工具 【免费下载链接】vcr Record your test suites HTTP interactions and replay them during future test runs for fast, deterministic, accurate tests. 项目地址: https://gitcode.com/gh_mirrors/vc/vcr 点击查看 免费下载 本指南聚焦 VCR 请求匹配…

📰

Claude Code 上下文压缩(Compaction)机制解密:recent-messages 分析指令与 `<analysis>`/`<summary>` 摘要流程

文档提示工程人工智能 【免费下载链接】claude-code-system-prompts All parts of Claude Codes system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, s…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬