Question

我正在尝试使用＆＃39; title元素＆＃39;输出数组中的所有值。有10个值 - 标题。问题：

for循环输出所有10个值，但它再次执行10次。

（输出10次）

我怎么能解决这个问题无法理解它，代码：此函数在数组p_marker.push(marker);中添加数据。

function placesToVisitMarker(results, status) {
    image = 'pin56.png';
    console.log(results);
    for (var i = 0; i < results.length; i++) {
        var marker = new google.maps.Marker({
            position: results[i].geometry.location,
            map: map,
            title: results[i].name,
            icon: image
        });

        distanceService.getDistanceMatrix({
            origins: [currentLocation],
            destinations: [results[i].geometry.location],
            travelMode: google.maps.TravelMode.WALKING
        }, callback);
        p_marker.push(marker);
    }
}

我想这个函数是将标题和距离输出到#list div

function callback(response, status) {
    if (status = "OK") {
        for (var i = 0; i < p_marker.length; i++) {
            $("#list").append(p_marker[i].title + "</br>");
        }
        //$("#list").append( +" "+ response.rows[0].elements[0].duration.text + "</br>")        
    } else {
        $("#list").append("ERROR" + status);
    }
}

Answer 1

回调方法中的循环导致问题，这是可能有帮助的解决方案，

在placesToVisitMarker中，你将每个tym的一个元素添加到p_marker。然后，在回调中，再次循环遍历p_marker的元素。就像，对于循环里面的placeToVisitMarker被调用10次，并且对于每个tym，回调是添加标题，这是p_marker元素的多倍。你似乎有问题。

关于为什么要打印10次的问题：

原因是，你的回调方法for循环是指p_marker，当调用回调时，p_marker中有10个元素。因此，对于每个回调调用，10个标题都会附加到列表中。

解决方案：

你应该在你的回调方法中删除'for'循环。并给“回调”功能访问特定的“i”值，以便将正确的标题附加到列表中。

function placesToVisitMarker(results, status) {
    image = 'pin56.png';
    console.log(results);
    for (var i = 0; i < results.length; i++) {
        var marker = new google.maps.Marker({
            position: results[i].geometry.location,
            map: map,
            title: results[i].name,
            icon: image
        });
        p_marker.push(marker);

        // use closure here to make the function remember about the 'i'
        // else what would happen is by the time callback will be 
        // called, i value would be 10, so same element 
        // will get appended again and again.
        (function(i) {
              distanceService.getDistanceMatrix({
                  origins: [currentLocation],
                  destinations: [results[i].geometry.location],
                  travelMode: google.maps.TravelMode.WALKING
              }, 
             function(response, status) {
                  if (status == "OK") {
                       $("#list").append(p_marker[i].title + "</br>");   
                  } else {
                       $("#list").append("ERROR" + status);
                  }

             });
        })(i);
    }
}

为什么它会多次迭代遍历数组元素？

1 个答案: