Javascript 集中导航的干净设计？

上下文

单页/ajax web应用程序

基本代码结构

LocationManager（负责更新浏览器哈希并将应用程序位置切换到其他磁贴）

页面/磁贴流

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

问题

当用户从Purchase Options导航到Review Order时，将进行一次长时间（5-8秒）的服务调用以计算订单详细信息。调用解决后，回调被设计为导航用户查看订单页面。问题是，如果用户在这段时间内单击“返回”并返回到“家庭信息”，一旦呼叫解决，他们将“自动”进入查看顺序。非常尴尬的用户体验

限制

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

当前提议的实施

在调用calculateOrder之前保存“currentLocation”。 将回调中的“currentLocation”作为intendedStartingPoint传递给setLocation方法。 内部设置位置方法

if（intendedStartingPoint==Locationmanager.currentLocation）{//Navigate}

总之，如果用户在通话过程中更改了位置，在通话解决后，我们将不会导航，因为用户不希望在该点被导航到查看顺序

这行得通，对吗

捕获

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

---

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

因此，现在用户可以单击“购买选项”页面上的“计算”按钮。然后显示某种加载指示器（希望如此） 并向服务器发送一个异步请求，并将

setLocation（'ReviewOrder'）

附加在一个延续中。在应用程序中有很多地方使用这种模式

存在意外（从用户角度）重定向的问题，因为使用这种方法，服务器数据检索和UI导航是耦合的。想到的一个解决方案是将它们解耦并删除

setLocation

调用 从所有长时间运行的请求继续。它可以按以下方式工作

当用户单击Calculate按钮时，您启动一个异步请求，同时立即导航到Review Order页面（从用户体验的角度来看这很重要，因为用户现在清楚地知道Calculate按钮导航到Review Order）。在Review Order页面上，显示一个加载指示器，如“请稍候，大约剩余10秒…”当请求完成时，隐藏加载指示器并显示数据

---

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

首先，如果用户能够返回并更改以前页面上输入的任何信息，必须使任何挂起的服务调用无效。如果基于过时信息的服务调用返回，则必须将其丢弃

这意味着，

如果（intendeStartingPoint===Locationmanager.currentLocation）{//Navigate}

是不够的。如果（intendedStartingPoint===Locationmanager.currentLocation&/*在此期间没有更改任何信息*/）{//Navigate}，则必须执行类似于

的操作

现在谈谈您的设计问题：如果没有任何具体的代码，构建它有点困难，但您可以执行以下操作：


在
LocationManager
然后，长时间运行的调用应始终注册到
LocationManager
LocationManager
应确保一次最多有一个长时间运行的呼叫处于活动状态
如果发生任何位置更改，所有（或一个活动的）长时间运行的呼叫都必须无效
长时间运行的呼叫的回拨应该检查它是否已失效，并且只有在这种情况下才进行导航
LocationManager
可以以统一的方式为所有回拨执行此操作
新的长时间运行的调用可以替换/使已经运行的调用无效，或者被拒绝，如您所愿

我希望这在您的具体情况下有意义。
首先，通过异步调用计算订单详细信息，并通过javascript向最终用户显示/模拟进度条

第二件事：不要在服务回调函数中强制执行
ReviewOrder
tile打开。当服务完成计算时，回调函数检查当前磁贴，如果它不是
ReviewOrder
tile，则将计算出的信息存储在会话或本地存储器中

当用户导航
ReviewOrder
tile时，将来自用户的订单详细信息与存储的订单详细信息进行比较（例如，通过哈希函数）

如果用户订单详细信息和存储订单详细信息的哈希代码相同，则显示保存的订单信息，否则再次调用服务

 <强>重要注释< /强>：为了防止订单锻造，请考虑以下方式：
在服务器上计算订单详细信息后，生成将返回给用户的唯一订单id。然后将计算出的订单详细信息与此id一起存储在服务器数据库中。如果用户未更改订单详细信息，则您的脚本将仅将此订单id作为一个符号发布到服务器，该订单已生效
if (LocationManager.currentLocation !== options.intendedStartingPoint) {
  // Tell the user that the calculation has finished.
  // Ask her if she wants to return to Review Order now.
}