javascript - for 循环中的 jQuery .load()

Question

我向我的服务器发送一个 ajax 请求。然后我收到一个对象。该对象看起来像这样:

{
    "payload": {
        "result": [
            "http://example.com/img1.jpg",
            "http://example.com/img2.jpg",
            "http://example.com/img3.jpg",
            "http://example.com/img4.jpg",
            "http://example.com/img5.jpg"
        ]
    }
}

然后我使用 for 循环遍历对象

if (typeof response.payload.result == 'object') {
    var ln = response.payload.result.length;
    var i;
    if (ln > 0) {
        for (i = 0; i < ln; i++) {
              /* this shows i was increased for every iteration */
              console.log(i);
          var current_img = response.payload.result[i];
          var img = $("<img />").attr('src', current_img)
           .load(function () {
                  console.log(i);
                  /* this logs the last iteration 4 times */
                $("#product-images").append(img);
          });
        }
    }
}

我的问题是只创建了 (1) 个图像元素。此代码执行后追加到 DOM 的单个元素是数组中最后一个元素的值。为什么 jQuery.load() 只在最后一次迭代时被调用？

Answer 1

if (typeof response.payload.result == 'object') {
    var ln = response.payload.result.length;
    var i;
    if (ln > 0) {
        for (i = 0; i < ln; i++) {
            (function (n) {
                var current_img = response.payload.result[i];
                var img = $("<img />").attr('src', current_img)
                    .load(function () {
                    console.log(n);
                    $("#product-images").append(img);
                });
            })(i);
        }
    }
}