AJAX - Очистка элемента / класса / таймера при замене содержимого - PullRequest
0 голосов
/ 23 февраля 2012

Сколько будет разработчиков, я создаю веб-приложение, которое использует AJAX для извлечения данных и HTML.

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

Я использую mootools, который является отличным фреймворком, но боролся с отсутствием деструкторов в javascript или даже onDestroys / unloads для элементов dom.

Я написал несколько классов пользовательского интерфейса (в основном для изучения), и многие из них используют таймеры setInterval для периодического получения данных с WebServer и обновления элементов на странице (в основном, изображений с камер).

Большинство проблем возникает, когда в меню запрашивается другая страница, и div содержимого перезагружается с новым HTML и Javascript (с использованием Request.HTML). Это просто заменяет все элементы, уже находящиеся в div, на новый и запускает новые сценарии. Все таймеры в старых сценариях или старых созданных объектах будут продолжать работать. Это оставляло меня с множеством осиротевших Клозов, стихий и таймеров.

Я читал больше на сайте mootools и осознал ряд ошибок, которые я совершил, и начал исправлять многие проблемы. Самый большой из которых не использовал Element.store и Element.retrieve вместо того, чтобы связывать мои классы непосредственно с Элементами.

Я уже обнаружил, что содержимое перезагружаемого div нужно освобождать, вызывая destroy для всех его дочерних элементов перед вызовом Request.HTML, но это не удалит (очистит) все запущенные таймеры.

Итак, я сделал JSFiddle здесь деинициализируем классы , чтобы показать, что я пытался, похоже, он работает нормально, но вот что я хочу знать:

  • Это хорошая идея?
  • есть ли другие проблемы, которые я мог пропустить?
  • Вы видите какие-либо проблемы с этим типом реализации?
  • или я заново изобретаю колесо и пропустил что-то?

Объяснение

Когда класс инициализируется, он сохраняет себя вместе с элементом.

Он также добавляет (делает при необходимости) сам в массив AssocClasses, также хранящийся вместе с элементом.

Я создал функцию ClearElement, которая вызывается всякий раз, когда содержимое элемента должно быть заменено, и вызов AJAX или другого метода, который получает все элементы в div, и если они имеют присоединенный массив AssocClasses, вызывает deinitialize на каждом из классов в массиве, он вызывает destroy для каждого из своих прямых потомков, чтобы освободить элементы / хранилище.

Любая информация, указатели и т. Д. Будут получены с большим удовольствием.

1 Ответ

1 голос
/ 23 февраля 2012
Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript ( using Request.HTML ). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers.

Я бы переосмыслил ваше хранение таймера и использование evalScripts в ваших вызовах ajax.

Храните их вне ваших запросов AJAX. При выполнении рецензирования кода редко встречался случай, когда они были необходимы и могли бы быть сделаны лучше.

Возможно, по ссылке, по которой щелкают, вызывается функция обратного вызова при завершении или при успешном выполнении

Не видя вашего точного кода, будет сложно дать дальнейшие рекомендации.

...