最大调用堆栈超过

我正在写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>'); 
     }); 
    } 

});

我正在循环浏览每家餐馆并计算距离，之后我将字符串格式化为显示3.2km的值。然后我想在DOM中追加这个。

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

只要我试试这个，我得到一个最大调用堆栈在控制台超出错误。

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

任何帮助，非常感谢。

来源

2016-10-01 Marcus Christiansen

请发表**可运行什么** [MCVE]，用栈片断（在'<>'工具栏的问题按钮）。这将让人们看到问题并帮助您解决问题，同时确保所有必要的内容都在现场。 –

你束缚，这给DOMNodeInserted事件上document水平，当你插入你插入一个DOM节点，触发该事件，这将插入一个跨度，触发DOMNodeInserted事件，该跨度插入一个触发......的跨度，直到栈满。

你必须重新考虑你的逻辑，并找到了一些其他事件或方法做你想要

来源

2016-10-01 14:26:13 adeneo

我同意这就是问题所在，但我对如何导致调用堆栈问题有点困惑。不应该在初始处理程序中由那些'.append（）'调用引发的事件发生在新的事件循环中吗？ – Pointy

@Pointy - 我不认为它是这样的，看起来消息队列在元素被插入时已经被填满了，并且在下一个等等之前它没有时间打勾，并且因为它是单线程填充的不能清除它的物品*（或类似的东西）*？ – adeneo

当你在事件处理程序中触发事件时，总会发生这种情况 - > https://jsfiddle.net/yoctn5ue/和https://jsfiddle.net/yoctn5ue/1/ – adeneo

最大调用堆栈超过

回答

相关问题