Question

function checkallfolder(){
  var thumbnailbox = $('#thumbnailbox');
  var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
  for (var c = 0; c < foldertype.length; c++ ){
    var folder = 'Img/dfolder/'+foldertype[c];
    $.ajax({
      type : "POST",
      url: "data.php",
      contentType:"application/x-www-form-urlencoded",
      dataType: "json",
      data: "folder="+folder,
      success: function(d) {
        var temp = '';
        thumbnailbox.html('');
        for (var obj in d){
          if (d.hasOwnProperty(obj) && d[obj].hasOwnProperty('src') && d[obj].src !== ''){
            var objname = d[obj].name;
            temp += "<div><img name="+d[obj].name+" class='icon' src="+d[obj].src+"></div>";
            console.log(d[obj].src);
          }
        }
        thumbnailbox.html(temp);
      }
    });
  }
}

我的意图是使用ajax检查图像里面的所有文件夹，所以我用“for”循环它，我检查了con日志，它加载了7次，所有对象都在调用，但后来我尝试将它们输出为“img” “与”src“。我只得到最后一个img，只有folder7 / img7出现了。我的代码出了什么问题？所有的“src”都被召唤出来，它应该是所有的形象。任何人都可以帮我看看吗？

Answer 1

这是使用闭包的经典案例。

<强>问题：

JavaScript中的变量具有功能级范围。由于您在循环内部使用AJAX（异步调用），因此无论AJAX调用的响应如何，您的循环都将执行。因此，当AJAX被激活时，你的循环就会完成，每次你的局部变量都被覆盖，因此你的c总是指向循环的最后一次迭代中设置的值。

使foldertype成为全局变量。将它移到你的功能之外：

 var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];

然后在checkallfolder()内执行此操作：

...
for (var c = 0; c < foldertype.length; c++ ){
var folder = getImageSrc(c);
...

和这样添加getImageSrc：

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

所以，你的所有代码都是这样的：

var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];


function checkallfolder(){
      var thumbnailbox = $('#thumbnailbox');
      for (var c = 0; c < foldertype.length; c++ ){
          var folder = getImageSrc(c);
          $.ajax({
                ...ajax code here...
          });
       }
}

function getImageSrc(c){
   return 'Img/dfolder/'+foldertype[c];
}

Answer 2

Declare an array and push "temp" value to this array and finally 
arr.toString() assign to thumbnailbox.html()

function checkallfolder(){
var thumbnailbox = $('#thumbnailbox');
var foldertype = ["img1", "img2", "img3", "img4", "img5", "img6", "img7"];
for (var c = 0; c < foldertype.length; c++ ){
var folder = 'Img/dfolder/'+foldertype[c];
var arr = new Array();
$.ajax({
 type : "POST",
 url: "data.php",
 contentType:"application/x-www-form-urlencoded",
 dataType: "json",
 data: "folder="+folder,
 success: function(d) 
 {
    var temp = '';
    thumbnailbox.html('');
    for (var obj in d){
    if (d.hasOwnProperty(obj) && d[obj].hasOwnProperty('src') && d   
    [obj].src !== '')
        {
            var objname = d[obj].name;
            temp += "<div><img name="+d[obj].name+" class='icon' src="+d
            [obj].src+"></div>";
            arr.push(temp);
            console.log(d[obj].src);
        }
    }
    //thumbnailbox.html(temp);
 }
});
}
thumbnailbox.html(arr.toString().replace(/,/g, ""));
}

从ajax获取所有图像

2 个答案: