javascript - 集中导航的简洁设计？

Question

上下文

单页/ajax 网络应用

基本代码结构

LocationManager(负责更新浏览器哈希并将应用程序位置切换到不同的磁贴)

页面/磁贴流

基本信息>家庭信息>车辆信息>购买选项>查看订单>输入付款并提交

问题

当用户从 Purchase Options 导航到 Review Order 时，会进行长时间(5-8 秒)的服务调用以计算订单详细信息。在调用解决后，回调旨在将用户导航到查看订单页面。问题是，如果用户在那段时间点击返回并返回到家庭信息，一旦调用解决，他们将“自动”进入审查订单。非常尴尬的用户体验。

限制

取消通话不是一种选择。需要一个解决方案来处理导航。

当前提议的实现

在调用 calculateOrder 之前保存“currentLocation”。将回调中的“currentLocation”作为 intendedStartingPoint 传递给 setLocation 方法。在 setLocation 方法中 if(intendedStartingPoint === Locationmanager.currentLocation) {//Navigate}

总而言之，如果用户在通话过程中更改了位置，则在通话结束后，我们将不会导航，因为此时用户不希望被导航至 Review Order。

这行得通，对吧？

收获

我们在应用程序中有很多地方在长时间运行的调用的回调中调用 setLocation。这意味着我必须使用新参数 intendedStartingPoint 更新所有 setLocation 调用。虽然这对我来说很有意义，但它似乎确实有可能变得有点困惑。

关于如何清理和集中它有什么想法吗？

Answer 1

因此，现在用户可以单击“购买选项”页面上的“计算”按钮。然后您显示某种加载指示器(希望如此)并向服务器发送异步请求，并在延续中附加 setLocation('ReviewOrder')。应用程序中有很多地方使用了这种模式。

意外(从用户的 Angular 来看)重定向的问题是存在的，因为在这种方法中，服务器数据检索和 UI 导航是耦合的。想到的一个解决方案是将它们解耦并删除 setLocation 调用来自所有长时间运行的请求延续。它可以按以下方式工作。

当用户单击“计算”按钮时，您会启动一个异步请求，同时立即导航到“查看订单”页面(从用户体验的 Angular 来看这很重要，因为用户现在清楚地了解计算按钮导航到查看订单)。在“查看订单”页面上，显示一个加载指示器，上面写着类似“请稍候，还剩大约 10 秒...”的内容。当请求完成时，隐藏加载指示器并显示数据。

这样一来，您的用户将拥有一致的用户体验，知道无论何时他们在您的应用程序中单击一个按钮都会发生同样的事情(他们导航到一个 View )，并且不会出现令人惊讶的自动重定向。