javascript异步调用

javascript async calls

本文关键字：调用异步 javascript 更新时间：2023-09-26

i m使用jQuery Slider。在它的"更改"事件中，我做了一些繁重的JavaScript——对函数进行ajax调用（我们称之为A），并从数据库中获取结果（实际上是从Cache中获取结果，以使其更流畅）。

问题是，在我们的压力测试中，我们发现如果我们经常使用滑块，请快速将其从右向左移动——它会对客户端进行许多异步JavaScript调用，从而导致对服务器的许多查询，从而导致UI损坏。

在测试了这个问题很多时间之后，如果我在调用之间设置一个超时，它似乎可以正常工作

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

也许我应该使用jQuery1.5的"deferred"来检查对函数A的第一次调用的状态，并等待它完成，然后再执行对该函数的第二次调用？

这只是一个想法。

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

这被称为debouncing，Ben Alman创建了一个很好的jQuery插件，可以让你轻松地集成它。

您检查过悬停意图插件吗？它的设计主要是为了防止这种类型的行为发生

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

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

取消公告

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

一次飞行中的单个Ajax调用

有时，所需的行为是，一旦发送了ajax调用，就不会再发送另一个，直到当前调用完成。这通常需要保留某种标志，指示您的ajax调用是否已经在运行中。如果您检测到滑块已经移动，但ajax调用正在运行，则设置另一个标志，表示ajax调用处于挂起状态。当每个ajax调用完成时，它会清除inFlight标志，并检查挂起的标志，看看是否应该再发送一个ajax调用。正确的错误处理在这里至关重要，这样inFlight标志就永远不会卡住。

强制Ajax响应按正确顺序排列

由于ajax调用是异步的，因此无法保证响应的接收顺序与请求的发送顺序相同，这有时会打乱结果。如果仍然需要发送大量ajax事件（所以您不想使用前面的任何一个选项），但结果必须按正确的顺序排列，那么可以强制将结果按正确的次序排列。这涉及到用某种序列号标记每个ajax请求，然后对无序到达的结果进行排队，直到它们的先例到达。这相当复杂，如果不是绝对需要的话，我不建议这样做。前面的选项实现起来要简单得多。

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