使用 $.each 进行迭代时

Question

在迭代包含数据的对象时，我正在检查图像的 url 对于函数是否有效。问题是函数检查图像仅针对最后一个对象运行 8 次。任何人都可以看到为什么？

功能检查图像：

function checkImage(url, succ, err){
    var checkImg = new Image();
    checkImg.src = url;
    checkImg.onerror = function() {
        err();
    };
}

和.each部分：

var obj = {},
searchResults = [];

$.each(data, function(i, m){
    obj = {'image': m.park_photo1_290x220, 'name': m.park_name, 'developer': m.park_developer_name,
    'location': m.park_location_name, 'exact_location': m.park_location_parent_name,
    'total_area': m.area, 'free_area': m.free_area, 'id': m.id, 'lat': m.park_lat, 'lon': m.park_lon};                            
    var uri = obj.image;
    console.log('object');

    checkImage(uri, function(){
        obj.image = uri;
    }, function() {
        console.log(x++);
        console.log(obj.name+','+obj.image);
        obj.image = 'images/no_foto_ssmall.png';
        console.log(obj.image);
    });

    searchObjects.push(obj);

    $('#search-results').append(''+
        '<li class=\"ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c\" role=\"option\" tabindex=\"'+ i +'\" data-theme=\"c\"><div>'+
        '<img src=\"'+ searchObjects[i].image +'\" class="ui-li-thumb">'+
        '<h3 class="ui-li-heading"><a href="#" class="ui-link-inherit single" name=\"'+ i +'\">'+ 
        searchObjects[i].name +'</a></h3></div>'+
        '<div class=\"search-detail\"><p>'+ searchObjects[i].developer +'</p></div>'+
        '<div class=\"search-detail\"><p>'+ searchObjects[i].location +'</p></div>'+
        '<span class=\"ui-icon ui-icon-arrow-r\"></span></li>'
    );
});

firebug回溯：

object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object
object

error1
1
Panattoni Park 1,/static/realestate/wp/wpp-88645820868768.jpg.290x220_q85.jpg
images/no_foto_ssmall.png
error1
2
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
3
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
4
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
5
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
6
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
7
Panattoni Park 1,images/no_foto_ssmall.png
images/no_foto_ssmall.png
error1
8
Panattoni Park 1,images/n

o_foto_ssmall.png images/no_foto_ssmall.png

---

按要求编辑

，我的对象：

var data = [{"total_area": 10800.0, "developer_id": 1511, 
    "photo1_290x220": "/static/realestate/wp/wpp176885389187907.jpg.290x220_q85.jpg", 
    "location_parent_name": "BZZ", "agent_phone_fax": "", 
    "location_id": 147, "id": 760, "developer_fax": "", "location_name": "ABC", 
    "lon": 10.870075199999999, "object_id": 201, "developer_name": "Orpo", 
    "agent_id": 8,"lat": 52.2079223, "warehouses_counter": 1, 
    "name": "Park 1","agent_phone_mobile": "+48 668 124 152", "featured": false, 
    "location_parent_id": 106}, 
    {"total_area": 30780.0, "developer_id": 193, 
    "photo1_290x220": "/static/realestate/wp/wpp195908774409312.JPG.290x220_q85.jpg", 
    "location_parent_name": "CDE", "agent_phone_fax": "", "location_id": 138, 
    "id": 761, "developer_fax": "", "location_name": "XYZ", 
    "lon": 20.9232473, "object_id": 187, "developer_name": "Orco","lat": 32.171918300000002, 
    "warehouses_counter": 5, "name": "Park 2","featured": false, 
    "location_parent_id": 106}]

Answer 1

所有闭包都在同一范围内关闭，因此同一个 obj 实例，因为在调用 obj 时异步调用 onerror ，已经是最后一个值了。

解决方案应该是在 obj 之前添加一个 var ：

var obj = {'image': ...

这个 小 jsfiddle demo 执行两次相同的代码，一次有修复，一次没有修复。

Answer 2

看起来您的变量 obj 定义超出了范围，因此无法正确评估它。

可能 searchResults 变量应该是 searchObjects 之一。

看起来您试图从哈希中读取不正确的数据，因此它几乎在所有地方都会返回 undefined 。

我的这段代码可以帮助你：

var x = 0;
var obj = {},
searchObjects = [];

$.each(data, function(i, m){
    var obj1 = {'image': m.photo1_290x220, 'name': m.name, 'developer': m.developer_name,
    'location': m.location_name, 'exact_location': m.location_parent_name,
    'total_area': m.total_area, 'free_area': m.free_area, 'id': m.id, 'lat': m.lat, 'lon': m.lon};                            
    var uri = obj1.image;

    console.log(obj1.name+','+obj1.image);
    checkImage(uri, function(){
        obj1.image = uri;
    }, function() {
        console.log(x++);
        obj1.image = 'images/no_foto_ssmall.png';
        console.log(obj1.image);
    });

    searchObjects.push(obj1);

    $('#search-results').append(''+
        '<li class=\"ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c\" role=\"option\" tabindex=\"'+ i +'\" data-theme=\"c\"><div>'+
        '<img src=\"'+ searchObjects[i].image +'\" class="ui-li-thumb">'+
        '<h3 class="ui-li-heading"><a href="#" class="ui-link-inherit single" name=\"'+ i +'\">'+ 
        searchObjects[i].name +'</a></h3></div>'+
        '<div class=\"search-detail\"><p>'+ searchObjects[i].developer +'</p></div>'+
        '<div class=\"search-detail\"><p>'+ searchObjects[i].location +'</p></div>'+
        '<span class=\"ui-icon ui-icon-arrow-r\"></span></li>'
    );
});

这在fiddler http://jsfiddle.net/nC7WA/1/ 上聚集在一起