第二题 · 并行请求 / 顺序落 UI

异步请求竞态问题演示

页面上有多个按钮,用户可以任意快速点击。每次点击都会立即发起一个异步请求,请求本身是并行发送的, 但返回结果必须严格按照点击顺序依次进入结果数组,并且每返回一条都要触发一次 UI 更新。 下方同时演示 Promise 和非 Promise(回调)两种实现。

Promise 方案

请求发出后立即并行执行;结果到达后先缓存,再通过顺序闸门按点击序号依次 resolve 并更新 UI。

Promise Gate
已点击次数 0
已落 UI 数 0
下一期待序号 0

UI 更新日志

    结果数组

    非 Promise 方案

    用回调函数 + 序号缓存替代 Promise 闸门。请求仍然并行发送,只有轮到当前序号时才执行回调并更新 UI。

    Callback Queue
    已点击次数 0
    已落 UI 数 0
    下一期待序号 0

    UI 更新日志

      结果数组

      观察重点

      点击顺序和网络返回顺序通常不会一致。这个页面故意给每个请求随机延迟, 所以你会看到“返回先后”是乱的,但两侧结果数组依然会按用户点击顺序稳定追加, 并且每次只追加一条,模拟真实 UI 动画式更新。