如何更有效地获取 XML 请求对象的类索引（因为我在当前方法中遇到问题）？

Question

我遇到的问题有点复杂，所以我制作了一个视频来展示我正在谈论的行为。

问题视频

如您所见，我想要实现的目标是在单击照片时打开更大尺寸的照片。正如你所看到的，它确实有效……嗯……有点。 它的行为有点奇怪，因为它似乎滞后并且没有很好地记录 onclick 事件。有时它可以更快地记录它，有时会更慢，但即使一次它也不会像我希望的那样通过单击打开图像。至少需要点击两次。我在没有 XML 请求的页面上尝试了代码，只需单击一下即可运行（尽管两个控制台日志调用之间有轻微的延迟......大约 0.3 秒）。如果我刷新聊天有很大延迟，它也适用于聊天页面。但我希望它只需单击一下即可以 1 秒的刷新率工作。

XML 请求如下：

  
     table2 = function(url, callback) 
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); 
             document.getElementById("scrollchat").innerHTML = this.responseText;
        }
    }; 
    request.open('GET', url);
    request.send();
    
    
}

function mycallback(data) {
   //alert(data);
}

table2('load_chat.php', mycallback);

setInterval(function(){
       table2('load_chat.php', mycallback);
      }, 1700);

XML 请求文件 load_chat.php 中的项目如下所示：

<img src="image1.jpg" class="responsive" onclick="fullimagetry()">
<img src="image2.jpg" class="responsive" onclick="fullimagetry()">
<img src="image3.jpg" class="responsive" onclick="fullimagetry()">
<!-- And the list goes on as more images are being loaded. -->

我处理这个问题的 JS 函数如下：

function fullimagetry() {

    let photonameval = document.getElementsByClassName('responsive');   
    console.log("click");

document.querySelectorAll('.responsive').forEach((element, index) => {
  element.addEventListener('click', function(event) {
    console.log('Clicked element index:', index, 'Image path:',photonameval[index].src);
    
    const fullPage = document.querySelector('#fullpage');
    
fullPage.style.backgroundImage = 'url(' + photonameval[index].src + ')';
    fullPage.style.display = 'block';
    
  });
});
    

}

有没有更好的方法来处理这个问题？也许修改 fullimagetry() 函数并使其更加高效，或者更改 XML 请求本身中的某些内容？正如您所看到的，请求是在 1.7 秒内发出的，这已经太慢了，但它至少可以在双击时工作。我希望它能在 1 秒内加载，这样用户就不会觉得服务器滞后。期待您的回复。

编辑：我必须指定为此使用 XML，因为我不知道有任何其他方法可以在不刷新页面的情况下加载页面上的元素。如果您能为我提供一种更有效的替代方法，我很乐意尝试。我仍在学习，我会根据在 Youtube 或 W3Schools 上找到的内容进行学习。另外，设置 1.7 延迟只是为了让照片更有可能打开，值越低，打开照片所需的点击次数就越多（我知道这很奇怪）。

Answer 1

由于信息缺失，我只能给你部分答案。您应该使用某种事件委托。
您不应将

addEventListener

添加到每个图像，而只需添加到聊天容器并检查单击的元素是否是图像。这样您将更加节省时间，并且可以从头开始执行脚本。您可以动态添加图像，而无需重新执行该函数。

您正在使用：

function fullimagetry() {
  let photonameval = document.getElementsByClassName('responsive');   
  document.querySelectorAll('.responsive').forEach((element, index) => {
    element.addEventListener('click', function(event) {
      //...
    )}
  })
}

这是非常低效的。每次单击图像时，您都会创建一个列表 (

HTML Collection Object

)，然后创建一个（几乎）相同的所有图像列表 (

Node List

)。
之后，您将事件侦听器附加到每个图像。没有理由认为函数

fullimagetry

已经可以引用单个图像了。接下来，当一个列表就足够时，您可以设置 2 个列表。所有这些都浪费了不必要的时间！

因此，您应该优化代码，不要为每个图像添加事件侦听器，而只是获取您单击的图像。为此，您甚至不需要任何类型的列表，因为您已经拥有想要使用的确切元素！

ChatContainer.addEventListener('click', function(element) {
  if (element.target.tagName === 'IMG') {
    FullPage.style.backgroundImage = `url(${element.target.src})`;
    FullPage.classList.add('d-block');
  }
})

FullPage.addEventListener('click', function() {
  this.classList.remove('d-block');
})

#FullPage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: contain;
  background-color: black;
  &.d-block {
    display: block;
  }
}

<div id="ChatContainer">
  <img src="https://placehold.co/600x400/FF0000/FFFFFF/png">
  <img src="https://placehold.co/600x400/00FF00/FFFFFF/png">
  <img src="https://placehold.co/600x400/0000FF/FFFFFF/png">
</div>

<div id="FullPage"></div>

为了将您的 XML 请求优化为

fetch

并减少该部分的加载时间，我需要确切地知道您的数据包是什么样的。但我已经非常有信心，通过优化的代码，您甚至不再需要 1.7 秒的延迟！