Javascript 超过最大调用堆栈

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

$(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>');
        });
    }

});

$（document）.bind（“域节点插入”，函数（e）{
如果（$（'#用户gps'）。长度）{
$（'.restaurant'）。每个（功能（索引、值）{
var lat=$（value）.find（'.latitude'）.attr（'data-src'）；
var long=$（value）.find（'.longitude'）.attr（'data-src'）；
var距离=地理定位器.calcDistance({
发件人：{
纬度：$（“#用户gps”）.attr（'lat'），
经度：$（“#用户gps”）.attr（'long'）
},
致：{
纬度：纬度，
经度：长
},
公式：Geologitor.DistanceFormula.HAVERSINE，
单位制：地理定位器。单位制。公制
});
变量字符串=数学圆（距离*10）/10+“km”；
var restaurantTitle=“#餐厅-”+索引+“.餐厅名称”；
//$（restaurantTitle）.append（字符串）；
//
log（$（restaurantitle））；
//console.log（$（value）.find（'.restaurant title'）.text（）+“-”+Math.round（distance，-1）+“km”）；
$（restaurantTitle）.append（“”+字符串+“”）；
});
}
});

我在每个餐厅循环计算距离，然后格式化字符串以显示3.2km这样的值。然后我想将其附加到DOM中

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

$（restaurantittle）.append（“”+string+“”）；

尝试此操作后，控制台中出现超过最大调用堆栈错误

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

---

非常感谢您的帮助

您已经将其绑定到

文档

级别上的

DOMNodeInserted

事件，当您插入span时，您正在插入一个DOM节点，触发该事件，该事件反过来插入一个span，该span触发

DOMNodeInserted

事件，该事件插入一个触发。。。然后继续，直到堆满

---

您必须重新考虑您的逻辑，并找到其他事件或方法来执行您想要的操作

您已经将其绑定到

文档

级别上的

域节点插入事件

上，当您插入span时，您正在插入DOM节点，触发该事件，该事件反过来又插入span，它会触发

domandeinserted

事件，插入一个范围来触发。。。然后继续，直到堆满

---

您必须重新考虑您的逻辑，并找到一些其他事件或方法来完成您想要的工作

请使用堆栈片段（工具栏按钮

发布一个可运行的问题。这将让人们看到问题并帮助您解决问题，同时确保所有必要的内容都在现场。请使用堆栈片段（

工具栏按钮）发布问题的runnable。这将让人们看到问题并帮助您解决问题，同时确保所有必要的内容都在现场。我同意这就是问题所在，但我有点困惑这将如何导致调用堆栈问题。初始处理程序中的那些

.append（）

调用引起的事件不应该发生在新的事件循环中吗？@Pointy-我不认为会发生，似乎在插入元素时消息队列被填满了，在触发下一个etc之前没有时间勾选，由于它是单线程的，所以它会填充堆栈，而无法清除其中的项（或类似的内容）？当您在事件处理程序中触发事件时，总是会发生这种情况->是的，我猜可能就是这样；它肯定在某处堆积了一些东西。谢谢。我将第一个if语句更改为if（e.target.id=='user gps'），以确保代码只在添加这个dom元素时触发，这只会发生一次。我同意这就是问题所在，但我有点困惑于这将如何导致调用堆栈问题。初始处理程序中的那些

.append（）

调用引起的事件不应该发生在新的事件循环中吗？@Pointy-我不认为会发生，似乎在插入元素时消息队列被填满了，在触发下一个etc之前没有时间勾选，由于它是单线程的，所以它会填充堆栈，而无法清除其中的项（或类似的内容）？当您在事件处理程序中触发事件时，总是会发生这种情况->是的，我猜可能就是这样；它肯定在某处堆积了一些东西。谢谢。我将第一个if语句更改为if（e.target.id=='user gps'），以确保代码只在添加这个dom元素时触发，这只会发生一次。