在JavaScript中处理某种异步情况

想象一下我有这样的设置。假设我的页面上有一些地图，旁边有一个对话框，其中有一个切换按钮

• 想象一下，当用户单击切换按钮时，一个不同的请求（取决于切换状态）被发送到服务器（根据请求返回不同类型的地图数据）。若在收到关于餐馆的数据后单击切换，那个么下次单击切换时，它将收到关于医院等的数据

• 还可以想象，当用户拖动地图时，一个刷新信号被发送到服务器，服务器发送相同类型的数据，但包含更新的信息。例如，当地图上显示医院时，如果用户拖动地图，则会再次收到医院，但位置已更新

问题

想象两种情况：

• 假设用户快速点击开关几次-然后下面的事情就会发生。首先，发送请求以接收餐厅数据。但是餐厅数据还没有到达——现在在收到餐厅数据之前，会发生下一次切换单击，并发送请求以获取医院数据（通常第二次单击切换将删除餐厅数据，但由于餐厅数据尚未出现在地图上，因此无法删除）。因此，最终我们将在地图上同时显示餐厅和医院的数据，这是我们不想要的

• 想象一下，用户单击切换，请求被发送以接收餐厅数据。但在收到餐厅数据之前，想象一下用户拖动地图（这会导致刷新）。由于拖动，现在发生的情况是，由于当前地图上有医院数据，由于刷新，将发送获取更新医院数据的请求。最后，我们将再次在地图上显示医院和餐厅的数据

我希望你能看到我在这里遇到的问题的模式。

---

处理这种情况的最佳做法是什么

我脑子里有解决办法。一个影响用户体验和UI，另一个涉及发送最后一个请求。我会解释如何：

1。禁用地图和按钮，直到请求完成。

因此，您可以做的是加载或覆盖div，直到返回请求信息为止。在此之前，不允许用户使用映射或切换。这是对用户界面的影响，但我见过一些网站以这种方式运行

2。地图位置。 另一个选项是将地图位置存储在类似的本地存储器中，并在请求成功时再次匹配地图位置。如果地图位于不同的位置，则提供类似搜索此区域等信息。谷歌地图的行为类似于此

3。提供最新的ajax请求并中止其他请求：

这可以通过按队列/顺序推送请求并发送最后一个请求以获得响应来实现。比如，如果你是通过ajax提供服务的，那么下面的一些代码，如果我调用

getFoo

10次，最后一个就会被解雇

var ajax = null;
var getFoo = function() {
    if(ajax) ajax.abort();
    ajax= $.ajax({});
};

---

你所描述的是一个简单的比赛情况

这类问题没有通用的解决方案，需要逐案处理。但在大多数情况下，您可能希望显示用户所做的最新操作的结果。如果您没有其他方法知道哪个请求是哪个，那么您可以将某种标识符附加到请求，例如a，并且仅在相应的请求完成时显示数据

---

有时，解决方案可以简单地禁用所有可能在请求期间导致竞争条件的操作，但这可能会恶化用户体验。以Google Docs online editor为例，假设每次触发自动保存功能时，整个编辑器都会被禁用。在这种情况下，存储每个更新并根据这些操作组合状态将是有益的。这样做状态管理的JavaScript之一是。如果希望像这样存储数据，可以使用数据库，例如

这是很多可以想象的事情。简言之，你想有与谷歌地图类似的行为吗？长话短说，你做了两个异步调用，你很担心，因为调用2可能会在调用1之前返回？是吗？我想有一种方法是使用可观察的。它允许您在需要时取消订阅（即在第一个请求完成之前发出第二个请求时取消第一个请求）。JeremyThille：这也可能发生，但这不是我在问题中描述的问题。（我想我们已经解决了您在代码中提到的问题，我必须检查一下。）。