Question

我正在编写获取用户GPS坐标（一次）的javascript，然后计算他/她与我在页面上显示的餐馆列表之间的距离。

$(document).bind("DOMNodeInserted", function(e) {

    if($('#user-gps').length) {

        $('.restaurant').each(function(index, value) {
            var lat = $(value).find('.latitude').attr('data-src');
            var long = $(value).find('.longitude').attr('data-src');

            var distance = geolocator.calcDistance({
                from: {
                    latitude: $('#user-gps').attr('lat'),
                    longitude: $('#user-gps').attr('long')
                },
                to: {
                    latitude: lat,
                    longitude: long
                },
                    formula: geolocator.DistanceFormula.HAVERSINE,
                    unitSystem: geolocator.UnitSystem.METRIC
            });

            var string = Math.round(distance * 10) / 10 + "km";
            var restaurantTitle = '#restaurant-' + index + ' .restaurant-title';
            //$(restaurantTitle).append(string);
            //
            console.log($(restaurantTitle));

            //console.log($(value).find('.restaurant-title').text() + " - " + Math.round(distance, -1) + "km");
            $(restaurantTitle).append('<span>' + string + '</span>');
        });
    }

});

我循环遍历每家餐厅并计算距离，之后我格式化字符串以显示3.2km的值。然后我想在DOM中附加它。

$(restaurantTitle).append('<span>' + string + '</span>');

一旦我尝试这个，我在控制台中出现最大调用堆栈超出错误。

我已经尝试了几种方法来确保我只选择我目前正在迭代的元素。我甚至给每个.restaurant一个独特的ID。选择器工作得非常好，但我不能追加或以任何方式添加字符串而不会收到错误。

非常感谢任何帮助。

Answer 1

您已将此绑定到DOMNodeInserted级别的document事件，当您插入跨度时，您正在插入DOM节点，触发该事件，而该事件又会插入跨度，触发DOMNodeInserted事件，插入一个触发的范围......并在其上移动，直到堆栈已满。

您必须重新考虑您的逻辑，并找到其他事件或方式来做您想做的事情

最大呼叫堆栈超出

1 个答案: