通过 Jquery 启动/停止 Ajax 调用

Posted 2023-02-22

【中文标题】通过 Jquery 启动/停止 Ajax 调用

【英文标题】：Starting/Stopping Ajax call via Jquery

【发布时间】：2011-07-01 16:12:03

【问题描述】：

我有一个带有 2 个标签的网页。这些选项卡在单击时显示/隐藏 div。两个选项卡都使用 jquery 对 php 脚本进行 ajax 调用，以显示来自不同数据库的结果。所以选项卡 1 显示食物列表，第二个选项卡显示价格列表。它设置为每 30 秒自动刷新一次。我的问题是，当我在两个选项卡之间单击时，我更喜欢未单击的选项卡会停止 ajax 调用，因此只有一个 ajax 调用正在运行，基本上是出于优化目的。我该怎么做呢？我是否会使用 setInterval 让它每 30 秒运行一次第一个选项卡 ajax 调用，然后当单击另一个选项卡时，调用一个函数以在第一个 setinterval 正在运行的 id 上运行 clearInterval？然后反之亦然，如果单击第一个选项卡，它会清除第二个选项卡 ajax 调用的间隔？

【问题讨论】：

你用什么来做tabbing--jQ UI tabs？

@JAAulde 是的，我正在使用 UI 选项卡

【参考方案1】：

基本上没有理由说明你在做什么。

我希望，如果您要加载某些内容，并且需要在一段时间后加载，您应该调用两个选项卡，但只询问是否有变化。所以假设，如果有变化，你每 10 秒调用一次服务器，返回 false 或 true 并不是什么大不了的事情，如果返回是，只需同步这两个项目。

如果不需要同步这两个项目，为什么单击选项卡时不同步它们？

为了用户体验，最好经常请求更改，但仅在需要时同步内容。

如果你做这一切，不要使用 setInterval 而是使用 setTimeout 并且在你的函数中再次调用 setTimeout，setInterval 不太好;-)

【讨论】：

两个标签之间没有任何关系。两者都从数据库中的不同表中获取不同的记录。一个选项卡可能有 100 个列表，一个选项卡可能只有 5 个。我认为通过停止对非活动选项卡的 ajax 调用并且只查看一个选项卡可以节省资源。因为它没有在非活动选项卡中查询数据库，所以我假设它会运行得更快，尤其是当多个人正在查看同一页面时。

特别是如果有 100 个或更多项目，我更愿意“询问”是否有任何更改。即使是两个标签。想象一下 gmail 每次都会在当前视图中加载全新的所有电子邮件，即使没有任何新内容......

为了澄清，您建议在页面首次加载时运行 ajax 脚本以填充两个表，然后 ajax 调用检查是否有更新。如果是这样，那么用新信息更新选项卡，否则不做任何事情？由于有多个字段可以更新，您是否会推荐一个单独的表来跟踪更新并检查该表以查看是否需要进行更新，而不是直接使用所有数据查询表？

还有更多选择。我使用“最新”的方法。使用您的 ajax 请求，您将在其中接收所有新数据，传入最新项目的日期和时间，或者如果增量则传递 id。如果现有行中有更新，您应该考虑选项卡更改时的更新，这比跟踪数据库中的更改更容易。

好吧，我在想如果表本身增长到数十万行（如果不是更多），那么最初查询一个可能有 10-20 行的表（如果有更新）会更快。或者你认为这不应该是一个问题？

【参考方案2】：

反复拉动与新事物拉动是一个不错的讨论，但我暂时远离它。

jQuery UI 选项卡可以在选项卡更改时绑定行为。我会将它连接起来，这样当一个选项卡变得可见时，它就会充满服务器内容，并且间隔开始重复该行为。我将存储 jQuery 的 AJAX 函数的返回值（旧 jQ 上的 XHR 本身，1.5 中的 jQ XHR 包装器）和返回的计时器 ID，该 ID 是由于启动间隔而产生的。

然后，每当加载新选项卡时，我会在 XHR/wrapper 上调用 abort() 并在计时器 ID 上调用 clearInterval，然后对新选项卡中的前一个选项卡执行相同的操作——通过 AJAX 填充（存储 XHR）并开始间隔（存储 ID）。