Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2017, 19:15
Новичок на форуме
Отправить личное сообщение для Petrov R Посмотреть профиль Найти все сообщения от Petrov R
 
Регистрация: 04.12.2017
Сообщений: 3

Течёт память из-за обработчиков на удалённых объектах
Добрый день Уважаемые!

Помогите мне разобраться пожалуйста.
Использую такого рода схему:
<html>
<body>
<div listen="my.action">...</div>
</body>
</html>

// После загрузки странички инициализируем обработчики
$(document).ready(function() {
   listenersInit();
});

function listenersInit(){
     //Для всех элементов с указанным набором атрибутов вешаем обработчики
     $("[listen][bn!=1]").each(function(){
              //Обработчик на click
              $(this).click(function(){ .....DO SOMETHING....});

              //Помечаем объект что на нём уже висит обработчик, чтобы повторно не вешать
              $(this).attr("bn", 1);

              return true;
     });

     return true;
}


Так вот проблема возможно в том, что при всяких ajax запросах, на страничке какие-то элементы и даже группы элементов удаляются или заменяются другими блоками кода по типу: obj.innerHTML="......";
и после этих ajax запросов вызывается функция listenersInit(), которая снова пробегает по элементам с не навешанными обработчиками и вешает на них.

Так вот проблема как я думаю в том, что когда элементы с обработчиками удаляются, то сами то обработчики никуда не деваются, а как их учесть я что-то ума не приложу.

Подскажите мне 2 вещи пожалуйста:
1. Удобный и понятный инструментарий для анализа того, что течёт на странице.
2. Как подобные ситуации разруливаете вы?

В плане инструментария, прошу учесть что у меня на машине стоит *никс, а в инете находил рекоммендации решения проблем с утечками в Visual Studio, мне это точно не подходит.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2017, 20:58
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

профилирование
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2017, 09:51
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Вы вешаете обработчики через jq (а он их кеширует), далее удаляете их используя свойство "innerHTML", а кеш остается.
Используйте вместо свойства "innerHTML", например, jq метод "html".
Кеш jq хранится тут: $.cache
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2017, 10:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Petrov R,
Можно вешать обработчики на родителей, которые постоянно находятся на странице, и не навешивать новые на динамически создаваемые-удаляемые элементы.
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2017, 13:33
Новичок на форуме
Отправить личное сообщение для Petrov R Посмотреть профиль Найти все сообщения от Petrov R
 
Регистрация: 04.12.2017
Сообщений: 3

Спасибо за ответы!

Я в итоге поставил хром и на ночь оставил свою прогу. Перед этим сделал снапшот состояния памяти в хроме. И утром, в итоге новых объектов насоздавалось. Но уже меньше.

Я в своём этом javascript'е везде все переменные в функциях инициализировал как var varname. А то до этого я к этому относился более небрежно, а тут рыть стал так оказывается в функции если не объявлена переменная, то она становится глобальной.

И про отличие innerHTML от html("") тоже прочитал, сейчас вот сделал чтобы перезапись элментов DOM везде была через html().

Хотел посмотреть содержимое $.cache но в консоли говорит на вариант:
console.log(JSON.stringify($.cache));
не работает.

Поделитесь может ещё советами по особенностям написания кода и избегания утечек памяти?

Последний раз редактировалось Petrov R, 05.12.2017 в 13:48.
Ответить с цитированием
  #6 (permalink)  
Старый 05.12.2017, 13:55
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Petrov R, в консоль необязательно строки передавать, она адекватно воспринимает любые типы данных.
Т.е. можно так:
console.log($.cache);
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2017, 21:30
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Сообщение от Nexus Посмотреть сообщение
Petrov R, в консоль необязательно строки передавать, она адекватно воспринимает любые типы данных.
Т.е. можно так:
console.log($.cache);
иногда лучше console.dir($.cache)
console.log (document); отображает html
console.dir (document); отображает объектную модель
https://developer.mozilla.org/ru/doc...PI/Console/log
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск