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

Question

我有这个功能，应该根据图像的标题检查图像是否存在，直到它们停止出现为止:

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++;
        }
    }

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

Answer 1

因为回调是异步的，所以每次回调执行时，i 的值很可能是循环中的最后一个值。考虑以下示例 ( DEMO ):

var length = 10;
var url = window.location;
for (i=0 ; i<length ; i++) {
    $.get(url, function(result) {
        console.log(i);
    });
}

此处，为 i 记录的值不会是 1 到 10，因为 i 是一个局部变量，在服务器发送响应时会不断更新。

---

您可以使用一种称为“currying”的技术来解决这个问题。将您的回调函数包装在另一个函数中，该函数立即传入 i 的当前值(DEMO):

success: (function(i){
    return function() {
        $("body").append("<img src='pic" + i + ".jpg' />");
    }
})(i),