javascript - How to solve delayed rendering on the front end

Question

Statement of needs:

  一个游戏项目，前端和后端采用websocket 协议通讯。
  
  游戏主操作界面，由一个6个按钮场景和一个主弹层组成，和后端交互的信息都是在主弹层上展示的。

  现在的情况是：
  
  a.当后端通知前端游戏开始后，会连续发送好几个信息，前端接收到后端发过来的信息后，需要依次以在主弹层
  
  上展示该消息。但是这样会出现一个情况就是 后面的信息会覆盖前面的信息。无法做到消息按照后端发送的顺序
  
  依次展示。
  
  b.还有一个情况就是，假如6人局游戏， 后端会要求6人都点击确定后，然后后端会发送到下个流程的消息，前端
  
  接收到改消息，提示到下个流程了，问题是如果是 最后一个玩家点击确定后，他还没来得及提示操作完成 类似
  
  的消息，就收到后端下个流程的消息了，然后最后一个玩家确定操作的消息就被覆盖了。

  如果在多个弹层上展示还好，可项目要求必须在同一个弹层展示，还有后端那边延迟处理的话，对性能消耗太
  
  大，后端延迟不现实；前端基于setTimeout做延迟，我试了下，问题多多了。
  

  不知道对于这种需求，大家怎么处理，求教！

Answer 1

There are a lot of inscriptions... The result boils down to one sentence. The messages received by websocket are first stored in a queue, and then the messages are popped up one by one according to the first-in-first-out and specified time. It is ok. I really don’t feel the difficulty.

Answer 2

aThe requirement is very strange. Information like notifications are generally in the form of notification. Each notification has its own life cycle and disappears when the time is up.
b If you click OK, you will immediately receive the message of the next process in the backend. Doesn’t this mean that the network condition is good, but the result is that you have to delay it specifically to prompt the completion? This reminds me of a previous joke. In order to let users see a cool loading screen, Thread.Sleep is forced