javascript - 处理 JavaScript 中的某些异步情况

Question

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

• 想象一下，当用户单击切换按钮时，不同的请求(取决于切换状态)被发送到服务器(服务器根据请求返回不同类型的 map 数据)。如果在收到有关餐馆的数据后单击切换按钮，那么下次单击它时，它会收到有关医院等的数据。

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

问题

想象两种情况:

• 假设用户快速单击切换按钮几次 - 然后会发生以下情况。首先，发送请求以接收餐厅数据。但餐厅数据尚未到达 - 现在在接收餐厅数据之前，会发生下一次切换单击，并发送请求以获取医院数据(通常第二次单击切换会删除餐厅数据，但因为它不在 map 还没有，它不能)。所以最终我们会在 map 上看到餐厅和医院的数据，这是我们不想要的。

• 想象用户单击切换并发送请求以接收餐厅数据。但是在收到餐厅数据之前，想象一下用户拖动 map (这会导致刷新)。现在由于拖动而发生的情况是，由于当前 map 上有医院数据，因此由于刷新，将发送获取更新的医院数据的请求。最后，我们将再次在 map 上得到医院和餐馆的数据。

我希望您能看到我在这里遇到的此类问题的模式。 处理此类情况的最佳做法是什么？

Answer 1

我心里有解决办法。一个对用户体验和 UI 产生影响，另一个涉及发送最后一个请求。我将解释如何:

<强>1。禁用 map 和按钮，直到请求完成。

因此，您可以做的是加载或覆盖 div，直到请求信息返回为止。在此之前，用户不得使用 map 或切换。这是 UI 影响，但我见过网站有这种行为。

<强>2。 map 位置。 另一种选择是将 map 位置存储在本地存储中，并在请求成功时再次匹配 map 位置。如果 map 位于不同位置，请提供一条消息，例如在此区域中搜索等。Google map 的行为方式与此类似。

<强>3。服务最新的 ajax 请求并中止其他请求:

这可以通过将请求推送到队列/顺序中并发送最后一个来获取响应来完成。就像你通过 ajax 提供服务一样，所以像下面的代码一样，如果我调用 getFoo 10 次，最后一个将被解雇

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