Утечки памяти Javascript с JVectorMap

Question

Я должен использовать javascript для проекта, но я ничего не знаю о javascript. В js-файле я использую jVectorMap для отображения карты мира, которая обновляется каждые 5 секунд. Когда я открываю веб-страницу с помощью этого javascript-файла в своем веб-клиенте и жду несколько часов, у моего компьютера заканчивается ОЗУ. Я использую консоль хром и консольный инструмент для определения части кода, создающего эту проблему. Когда я удаляю эту часть, проблема с использованием памяти отсутствует.

Часть кода:

function ui_geo_map(countriesCount) { 
    $('#geo-world-map').empty(); 
    $('#geo-world-map').vectorMap({ 
     map: 'world_mill_en', 
     series: { 
      regions: [{ 
       values: countriesCount, 
       scale: ['#2ecc71', '#c0392b'], 
       normalizeFunction: 'polynomial', 
       legend: {vertical: true} 
      }] 
     }, 
     onRegionTipShow: function(e, el, code){ 
      el.html(el.html() + ' (' + countriesCount[code] + ' - servers)'); 
     } 
    }); 
}; 

function ui_geo() { 
    console.debug('Redrawing the geo map'); 
    $('.pywos-geo').remove(); 
    $.getJSON('/get/geo/all', function(data){ 
     $.each(data, function(key, val){ 
      countriesCount[val.country_code] = val.count; 
     }); 
     ui_geo_map(countriesCount); 
    }); 
}; 

Я знаю пустой следуют vectorMap, конечно, не правильный способ сделать это, но если я удалю $('#geo-world-map').empty(); карта не заменяется, вместо этого он отображается под предыдущий, который не то, что я хочу.

Может ли кто-нибудь помочь мне найти правильный способ сделать это без каких-либо утечек памяти?

Answer 1

Прежде всего есть метод remove который вы должны вызвать на экземпляре jVectorMap который грациозно удаляет все элементы DOM и связанные объекты JS:

var map = new jvm.Map({ 
    container: $('#geo-world-map'), 
    map: 'world_mill_en', 
    series: { 
     regions: [{ 
      values: countriesCount, 
      scale: ['#2ecc71', '#c0392b'], 
      normalizeFunction: 'polynomial', 
      legend: {vertical: true} 
     }] 
    }, 
    onRegionTipShow: function(e, el, code){ 
     el.html(el.html() + ' (' + countriesCount[code] + ' - servers)'); 
    } 
}); 

Также не нужно, чтобы воссоздать всю карту каждый раз, когда вам необходимо обновить значения (это большая трата ресурсов), вы можете просто обновить данные:

$.getJSON('/get/geo/all', function(data){ 
    $.each(data, function(key, val){ 
     countriesCount[val.country_code] = val.count; 
    }); 
    map.series.regions[0].setValues(countriesCount); 
});