Javascript 使用jQuery检查图像是否存在时加载图像不起作用

Javascript 使用jQuery检查图像是否存在时加载图像不起作用,javascript,jquery,ajax,asynchronous,currying,Javascript,Jquery,Ajax,Asynchronous,Currying,我有一个功能,根据图片标题,检查图片是否存在,直到它们停止出现: function LoadPictures(){ const PIC_MAX = 12; var i = 1; while (i <= PIC_MAX){ $.ajax({url: "pic" + i + ".jpg", type: "HEAD", success: function()

我有一个功能,根据图片标题,检查图片是否存在,直到它们停止出现:

function LoadPictures(){
        const PIC_MAX = 12;

        var i = 1;

        while (i <= PIC_MAX){
            $.ajax({url: "pic" + i + ".jpg",
                type: "HEAD",
                success: function(){
                    $("body").append("<img src='pic" + i + ".jpg' />");
                },
                error: function(){
                    i = PIC_MAX + 1;
                }
            });

            i++;
        }
    }

然而,当我运行这个函数时,我得到的只是空白框。我知道循环根据出现的框的数量正确地计算了现有的图像,但它没有加载它们。这是为什么?

这是因为回调是异步的,所以i的值很可能是每次执行回调时循环中的最后一个值。考虑下面的例子:


这是因为回调是异步的,所以i的值很可能是每次执行回调时循环中的最后一个值。考虑下面的例子:


你检查过这个脚本生成的标记吗?你检查过这个脚本生成的标记吗?效果很好。对我来说,这是一段相当奇怪的代码。所以,我永远也想不到。谢谢你的提示。工作很有魅力。对我来说,这是一段相当奇怪的代码。所以,我永远也想不到。谢谢你的提示。
var length = 10;
var url = window.location;
for (i=0 ; i<length ; i++) {
    $.get(url, function(result) {
        console.log(i);
    });
}
success: (function(i){
    return function() {
        $("body").append("<img src='pic" + i + ".jpg' />");
    }
})(i),