Я создаю одностраничный webapp. Это означает, что с течением времени я получаю новые элементы DOM, удаляю ненужные. Например, когда я беру новую форму, я просто заменяю содержимое конкретного div этой формой HTML, а также настраиваю слушателей, уникальных для этих элементов формы. Через некоторое время я заменяю содержимое этой формы новым экземпляром формы (с разными идентификаторами).
Я снова установил слушателей событий для этой новой формы. Теперь предыдущая форма больше не является частью DOM, поэтому элементы DOM должны автоматически собираться с мусором. Я также ожидаю, что функции слушателя, указывающие на элементы, удаленные из DOM, исчезнут.
Однако следующий профиль, собранный из Chrome, показывает, что количество моих слушателей растет с течением времени. Можете ли вы сказать мне, почему это так? Я попытался нажать кнопку "Собрать мусор". Но это профиль, который я получаю. Что-то не так с тем, как я строю свое приложение? Есть ли проблема, и если да, то как мне ее исправить?
В случае, если это важно, я использую язык программирования JSP с jquery, jquery-ui и некоторыми другими плагинами. Вот как выглядят динамические фрагменты, которые я добавляю/удаляю на своей странице.
<script>
$(document).ready(function() {
$("#unique_id").find(".myFormButton").button().click(
function() {
$.ajax({url: "myurl.html",
success: function(response) {
console.log(response);
}
});
});
});
</script>
<div id="unique_id">
<form>
<input name="myvar" />
<button class="myFormButton">Submit</button>
</form>
</div>
Обновление
Если вы хотите взглянуть на фактический код, вот соответствующая часть. Эта ссылка показывает, что при нажатии кнопки очистки функция clearFindForm вызывается, которая эффективно обновляет содержимое (фрагмент HTML) с использованием запроса ajax и заменяет весь div в этом jsp с выбранным содержимым. Функция refetchContent работает следующим образом: Здесь - ссылка на код в случае, если это помогает в предоставлении лучшего ответа.
function refetchContent(url, replaceTarget) {
$.ajax({
url: url,
data: {},
type: "GET",
success: function (response) {
replaceTarget.replaceWith(response);
},
error: function (response) {
showErrorMessage("Something went wrong. Please try again.");
}
});
}
