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

Question

我正在尝试使用“标题元素”从数组中输出所有值。有 10 个值 - 标题。问题：

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

标题 1 标题 2 标题 3 标题 4 标题 5 标题 6 标题 7 标题 8 标题 9 标题 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 的元素。就像，placesToVisitMarker 内的 for 循环被调用 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);
    }
}