38 lines
2.5 KiB
Markdown
38 lines
2.5 KiB
Markdown
# 加载体验优化与带宽节省方案
|
||
|
||
我将分两步实施您的需求，重点解决宽带占用问题和优化加载反馈。
|
||
|
||
### 第一步：宽带占用优化（核心：实现请求中止）
|
||
**目标**：当用户在歌曲列表中切换或确认选歌时，强制切断之前正在进行的预览音频下载，将带宽瞬间释放给当前操作。
|
||
|
||
**涉及文件**：`abstractfile.js`, `loader.js`, `songselect.js`
|
||
|
||
1. **改造底层请求 (`abstractfile.js`, `loader.js`)**：
|
||
* 修改 `RemoteFile` 类，使其能够持有并控制底层的 `XMLHttpRequest` 对象。
|
||
* 实现 `abort()` 方法：当调用时，直接触发 `xhr.abort()` 中断网络连接。
|
||
* 优化 `loader.ajax`：确保请求被中止（Abort）时，Promise 能够被正确处理，不会在控制台抛出无关的错误报错。
|
||
|
||
2. **选歌逻辑拦截 (`songselect.js`)**：
|
||
* 在 `SongSelect` 类中引入机制来追踪当前正在下载的预览音频。
|
||
* **关键动作**：每当用户移动光标（`moveToSong`）或按下确认键（`confirm`）时，**立即调用**上一首歌曲文件的 `abort()` 方法。
|
||
* 这将确保“非加载用户所选”的进程被立刻停止，实现您要求的“转而加载用户加载的歌曲”。
|
||
|
||
### 第二步：加载界面升级（百分比与超时提醒）
|
||
**目标**：让用户直观看到加载进度，并在卡死时提供解决方案。
|
||
|
||
**涉及文件**：`loadsong.js`, `loadsong.html`, `loadsong.css`
|
||
|
||
1. **UI 界面改造 (`loadsong.html`, `loadsong.css`)**：
|
||
* 在加载界面的小咚动画下方添加一个明显的百分比数字显示（例如 `0%` -> `100%`）。
|
||
* 调整 CSS 样式，确保文字清晰、美观，且不遮挡原有动画。
|
||
|
||
2. **进度与超时逻辑 (`loadsong.js`)**：
|
||
* **进度计算**：统计本次选歌需要加载的文件总数（音频、谱面、背景图等）。每完成一个文件的加载，实时更新界面上的百分比数值。
|
||
* **超时救援**：设置一个 **30秒** 的安全计时器。
|
||
* 如果 30秒 后游戏仍未开始，将“加载中...”的提示修改为“加载超时，建议刷新网页”，并提供显眼的刷新操作指引。
|
||
* 这能有效解决用户看着 0% 不知道是卡死还是慢的问题。
|
||
|
||
### 第三步：验证
|
||
* 通过网络面板确认快速切歌时旧请求变为 `cancelled` 状态。
|
||
* 验证加载界面的百分比数字跳动流畅。
|
||
* 模拟超时情况，确认提示信息正确显示。 |