制作一个“随机播放”按钮
作者分享了他为自己的笔记博客（974条笔记）制作“随机播放”（Shuffle）按钮的过程。最初的做法是在每个HTML页面中嵌入所有笔记ID的列表，但每次发布新笔记都会导致所有页面缓存失效、重新部署，效率低下。经过方案权衡，他最终采用了一个独立HTML页面作为随机路由：用户点击“Shuffle”链接后跳转到该页面，页面内嵌JavaScript逻辑，在短暂延迟后随机跳转至一条笔记。作者特意加入300毫秒的延迟，模拟老式CD播放器“随机播放”时的“思考”过程，让用户清晰感知意图已被接收并执行。尽管这种方案显得“刻意缓慢”，但他认为这种反馈体验让交互更具人情味。
背景速读
- Jim Nielsen 是一位独立网页开发者/设计师，运营个人网站和博客，经常分享前端开发、静态网站构建等技术实践。
- 他的"笔记博客"(notes.jim-nielsen.com)是一个纯静态网站——所有页面在构建时生成好 HTML 文件，直接托管在 Netlify 上，没有后端服务器。这意味着任何"随机"功能都无法靠服务端实时处理，只能要么在构建时预生成随机链接，要么靠前端 JavaScript 实现。
- 文章讨论的核心问题是：静态网站上的"随机浏览"功能如何实现得既优雅又高效。旧方案把全部笔记 ID 注入每个 HTML 页面，导致每次新增内容时所有页面哈希都变、缓存全失效；新方案用一个单独的"Shuffle"路由页面承载逻辑，既减少了部署开销，又刻意加入了 300 毫秒延迟来模拟旧 CD 播放器"正在随机选曲"的交互反馈。
- 这种"故意做慢"的交互哲学是本文区别于纯技术讨论的亮点：在即时响应成为默认值的今天，作者怀念硬件设备因物理限制而产生的、让用户感到"意图已被接收"的短暂等待状态。