最大調用堆棧超過

我正在寫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

最大調用堆棧超過

回答

相關問題