htmx.ajax 在进行多个查询时只调用两次答案

【问题标题】：htmx.ajax only called twice when making multiple querieshtmx.ajax 在进行多个查询时只调用两次
【发布时间】：2022-11-25 03:03:30
【问题描述】：

我在多个 x 数据块内的给定属性上使用 Alpinejs 的 $watch()，以便在该属性发生更改时使用自定义处理程序调用 htmx.ajax。这是一个 sn-p：

HTML:

<div x-data="{profiles:[]}">
  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div>
  <!-- profiles modified here in response to user input -->
  ...
  </div>
</div>

Java脚本：

function onProfilesChanged() {
  htmx.ajax('GET', ..., {'handler': (evt,response)=>{...}});
}

在浏览器中调试我可以看到 onProfilesChanged 按预期被调用（3 次），但只发送了 2 个网络请求，然后回调处理程序只执行了两次。这些请求似乎对应于第一次和最后一次调用，并且中间的所有内容都以某种方式丢失（尝试了更多$watch()回调）。 Firefox 和 Chromium 的行为相同，所以我怀疑这是浏览器限制，但我在 htmx 文档中找不到任何关于可以排队的最大 Ajax 请求数的内容。

我在这里完全不知所措，将不胜感激任何对可能发生的事情的洞察。谢谢！

编辑：在 for 循环中使用 htmx.ajax() 时也会发生此问题，所以这似乎确实是在 htmx 方面。有一个 hx-sync 标签可以设置 hx-get/post.. 标签的队列行为，但似乎不适用于 JS API。

【问题讨论】：

请分享一个重现问题的最小示例。
添加了一些示例代码来显示问题

标签： javascript ajax htmx

【解决方案1】：

最终设法找到解决方法：向 Ajax 请求的选项属性添加一个动态的 source 元素解决了这个问题。在 for 循环的情况下，我仍然限制每个元素有 2 个请求，但是来自不同来源的请求现在有不同的队列。

保留它以备将来参考，以防它对其他人有帮助。

【讨论】：

【解决方案2】：

您能否添加一个如何添加源元素的示例？我也被卡住了，不知道源元素是什么。

【讨论】：