JavaScript：如何在函数内部执行一个函数而没有延迟？

Question

我正在尝试使用JavaScript制作自动化图像库，将img语句（+一些css的额外内容）粘贴到HTML中。 所有图像都在同一个文件夹中，并且命名为image(1)，image(2)，... 显然客户端无法知道文件夹中的文件名称或文件数量。 附加过程很好，但我找不到一种方法可以在不手动指定图片数量的情况下停止附加过程。 我正在尝试使用“.onerror”停止附加过程，当浏览器无法找到下一个图像时，但它总是被跳过直到结束（导致无限循环（我正在使用“i<=6”进行测试））。

谢谢！这是我的代码：

function showgallery() {
  let flag = true;
  let i = 1;

  while (i <= 6 && flag) {
    $("#fotos").append(`<div class="cssbox">
            <a id="image${i}" href="#image${i}"><img id="picture${i}" class="cssbox_thumb" src="../photogallery/image (${i}).jpg">
                <span class="cssbox_full"><img src="../photogallery/image (${i}).jpg" /></span>
            </a>
            <a class="cssbox_close" href="#void"></a>
            <a class="cssbox_prev" href="#image${i-1}">&lt;</a>
            <a class="cssbox_next" href="#image${i+1}">&gt;</a>
            </div>`);

    document.getElementById(`picture${i}`).onerror = () => {
      flag = false;
    }

    i++;
  }
}

window.onload = showgallery;

- Luachmor

---

快速而简单的解决方案。向文件发出HEAD ajax请求。如果它返回成功响应代码，则存在，追加它，增加计数，重复此过程。如果它返回404或其他错误响应代码，则不存在，请停止处理。 - Taplar

使用 HEAD 请求而不是 GET 请求的原因是，HEAD 请求不会返回图像数据。由于您只想确定文件是否存在，因此不需要数据。 - Taplar

看看这个帖子，似乎可以解决你的问题。 - user548

@Taplar 我们很感兴趣看到那个解决方案。 - Kunal Mukherjee

非常抱歉回复晚了。我尝试了上述所有方法，它们都有效，但只适用于图片本身，似乎无法获取链接和跨度...而我真正需要的是能够点击图片，查看更大的功能。难道没有办法将整个字符串附加上去吗？ - Luachmor

Answer 1

它跳过某些东西的原因是因为每个图像加载和 onerror 被调用都需要时间，然而你正在循环中执行所有代码而不等待错误，所以即使有错误标志变量也不会在错误事件被触发之前改变，这种情况发生在当前循环周期之后。

相反，要做到这一点，可以使用递归，如果某个条件尚未满足。此外，我建议先使用 Image 进行测试，然后将其附加到文档中，这样你甚至不需要错误，只有成功加载时才会添加它。

所以你可以在这里使用递归，例如

var cur = 0
function getImg() {
    var img= new Image ()
    img.src = "image (" + (cur++) + ").jpg"
    img.onload = () => {
            fotos.appendChild(img)//or other span elements etc that have img as a child
            
            getImg()
        }
//if you want to know when it ended then you can use .onerror
       img.onerror = () => console.log("done")
}

getImg()

- B''H Bi'ezras -- Boruch Hashem