前端交互之立即响应

[xinglie]

前端承接的需求及逻辑复杂度越来越高，同时异步场景随处可见。这对于前端工程师来说，要实现一个良好体验的应用需要花费更多的精力和时间，这篇主要讨论界面的立即响应细节

用户在使用系统时，都希望有交互后，比如按钮点击，系统能够立即响应，最好能直接给出要想的结果，讨厌等待。

在目前这种前后端交互的技术架构上，即使使用socket进行通讯，也无法做到数据处理及结果立即响应。针对这种场景，前端应该在合适的地方展示系统正在处理的内部过程，比如用户点击按钮，按钮变成正在处理的文字提示，或在界面某个地方，有一个处理进度条，实时告诉用户目前系统的处理进度。

但凡有异步的地方，均需要考虑提示用户当前系统的内部状态，切不可认为网络速度快就不处理。否则在网络不好的情况下，小白用户只会认为系统当前卡死了，无响应，事实上这个卡死了，无响应并不是开发者理解的卡死，而只是用户参与交互后，界面没有给出相应的提示。

再比如我们用弹出框做一个详情展示，用户点击查看详情时，弹出框应立即展示，弹出框的内容可以加一个正在加载的动画，表示正在获取详情，在获取到详情数据后，再把弹出框内容替换为真正的详情内容。

那么在弹框时，这个弹框切不可异步加载，我们知道对于一些组件、框架，有能力在需要时再临时加载相应的组件，但这个对话框不要这样做，否则用户点击查看详情时，会有一段时间用于异步加载弹出框组件，然后才能看到内容，这对于用户来说，会觉得这个系统不灵敏，从而造成反复点击

只要是用户参与交互的地方，均需要给出相应的提示和反馈，一定做到立即响应