加载图像检查他们使用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是继续在服务器发送一个响应以获取更新的一个局部变量。

---

你可以使用一种叫做“柯里”的技术来解决这个问题。裹在另一个函数的回调函数，通过在i立即（DEMO）的当前值：

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