javascript异步调用

Question

我正在使用jQuery Slider。 关于它的“改变”事件我做了一些沉重的JavaScript - 对函数进行ajax调用（让我们称之为A）并从数据库中获取结果（实际上来自Cache以使其更平滑）。

问题是，在我们的压力测试中，我们发现如果我们使用滑块很多，快速从右向左移动 - 它会对客户端进行许多异步JavaScript调用，从而导致对服务器的许多查询这会导致用户界面破损。

经过大量时间测试此问题后，似乎如果我在呼叫之间设置超时 - 它可以正常工作。

所以我想知道我该怎么办才能避免这种情况？ 我怎么能确定如果用户做出这种情况他不会看到破坏的UI？

也许我应该使用jQuery 1.5的“延迟”来检查第一次调用函数A的状态并等到它完成，然后我将执行该函数的第二次调用？

这只是一个想法。

Answer 1

一种解决方案是仅在滑块未在一定时间内更改时才进行Ajax调用，假设为200ms（选择适当的阈值）。

这称为 debouncing ，Ben Alman创建a nice jQuery plugin，让您轻松整合。

Answer 2

你检查过Hover Intent插件吗？它主要用于防止此类行为发生

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

这里有多种可能的解决方案：

去抖

仅在滑块停止移动一段时间后才发送ajax调用。这可以防止快速发送ajax调用，并保证ajax调用永远不会在它们之间发送少于xx的时间。当滚动事件过快地堆积时，当您无法足够快地更新状态时，这种类型的行为对于处理滚动事件很常见。在每个事件中，这涉及管理将在滑块移动时设置的计时器，然后如果它停止移动一段时间则会触发，并且每当滑块在暂停时间过去之前移动一些时重置。

一次启动单个Ajax呼叫

有时，理想的行为是，一旦您发送了ajax呼叫，您就不会发送另一个呼叫，直到当前呼叫完成为止。这通常涉及保留某种标志，指示您的一个ajax呼叫是否已经在飞行中。如果您检测到滑块已移动，但正在进行ajax调用，则会设置另一个标记，表明ajax调用正在等待处理。当每个ajax调用完成时，它会清除inFlight标志并检查挂起标志以查看是否应该再发送一个ajax调用。正确的错误处理在这里至关重要，因此inFlight标志永远不会卡住。

强制Ajax响应进入正确的顺序

由于ajax调用是异步的，因此无法保证响应的响应顺序与发送请求的顺序相同，这有时会导致结果混乱。如果它仍然需要发送大量的ajax事件（所以你不想使用前面的任何一个选项），但结果必须按正确的顺序排列，那么结果可以被强制进入订购。这涉及使用某种序列号标记每个ajax请求，然后将无序到达的结果排队，直到它们到达先例为止。这是相当复杂的，如果不是绝对必要，我不会推荐它。以前的选项更容易实现。

Answer 4

当滑块移动时，存储滑块的值并等待一段短时间（假设为500毫秒），如果在该时间段内没有移动则调用Web服务，否则如果此人移动之前500毫秒启动，只需重置滑块的存储值并再等500毫秒。