Как предотвратить создание модала более одного раза?

Question

Это немного более абстрактно, чем обычные вопросы, которые, как я знаю, противоречат духу вещей, но я надеюсь, что я все еще могу получить хороший ответ.

Вот проблема. У нас довольно сложное веб-приложение, написанное на PHP. Цель относительно неважная, но просто поставлена: мы используем Comet/AJAX/JSON/JavaScript/PHP/MySQL (без jQuery, однако, только для родного JavaScript) для визуализации элементов управления, отображающих данные в реальном времени. Во всем этом приложении мы обрабатываем всплывающие модули, используя родной JavaScript. Это довольно сложная логика, которая проверяет наличие модального с тем же именем на странице и предотвращает создание новых версий того же самого, и, разумеется, когда-то созданный слой создается, чтобы предотвратить взаимодействие со ссылками ниже.

Проблема заключается в том, что у нас есть хотя бы один модаль, который можно вызвать несколько раз, прежде чем он будет отображаться на странице из-за времени, которое требуется вызову AJAX для сбора данных из базы данных и сборки для представления. Если пользователь должен «дважды щелкнуть» по указанной ссылке, они будут представлены двумя модалами, один поверх другого. Я смог на самом деле отобрать 8-10 из них. Взаимодействие с самым верхним модалом кажется нарушенным, потому что пользователь фактически производит разборные заголовки на самом нижнем модале. Как только вы закроете диалоговые окна и дойдете до низа, вы увидите, где вы нажали.

Итак, моя проблема такова: что является лучшим способом предотвратить это поведение?

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

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

спасибо.

Answer 1

В этом случае я нашел, что самое простое решение - лучшее, но я все равно буду любить услышать другие отзывы, если это там.

В этом случае я обнаружил, что порядок операций был проблемой. Я ожидал ответа AJAX, чтобы сгенерировать тело html для этого модального. Я изменил порядок, чтобы вместо этого создать модальный код, используя <p>Loading...</p> в теле модальности. Затем, когда AJAX был завершен, и у меня был новый текстовый текст, я просто ввел его в область содержимого модала с аккуратным фрагментом кода, а ваш дядя Боба, у нас был джек-пот.

Answer 2

Вы можете отменить обработчик щелчка, когда он выстрелил:

var element = ..., 
myClickHandler = function(event) { 
    // ... 
    element.removeEventListener('click', myClickHandler, false); 
    // ... 
} 

element.addEventListener('click', myClickHandler, false);