javascript异步调用

Question

即时通讯使用jQuery Slider 。 在它的“ change”事件中，我正在做一些繁重的JavaScript-进行ajax调用（称为A）并从数据库中获取结果（实际上是从Cache使其更平滑）。

事实是，在压力测试中，我们发现如果我们大量使用滑块，则需要将滑块从右向左快速移动-它对客户端进行了许多异步JavaScript调用，导致对服务器的许多查询导致结果导致UI损坏。

经过大量时间测试此问题后，看来，如果我在两次通话之间设置了超时，则可以正常工作。

所以我想知道如何避免这种情况？ 我如何确定如果用户出现这种情况，他将不会看到损坏的UI？

也许我应该使用jQuery 1.5的“ deferred”来检查对函数A的第一次调用的状态，并等待其完成，然后再对该函数执行第二个调用？

这只是一个想法。

Answer 1

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

这称为反跳 ，Ben Alman创建了一个不错的jQuery插件 ，可让您轻松集成它。

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 ms。