1

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

Метод showMessage выводит какое-либо сообщение.

Может быть такая ситуация, что вылетело какое-то сообщение (т.е. что-то вызвало showMessage), пользователь его еще не прочитал, а уже прилетает новое сообщение. В общем нужно организовать очередь сообщение. Т.е., если пользователь закрывает сообщение и очередь не пуста, то сразу вылетает новое сообщение.

Код

window.onload = function() {
    setInterval(() => foo(), 3000);  // генерация нового сообщения каждые 3 сек
};
 
cnt = 0;
function foo() {
    showMessage('cnt', cnt);
    cnt += 1;
}
 
messageQueue = [];
 
showMessage.show = false;  // флаг того, что сейчас отображается сообщение
function showMessage(caption, message) {
    // если показывается сообщение, то поместить новое сообщение в очередь     
    if (showMessage.show) {
        messageQueue.push([caption, message]);
        console.log(messageQueue);
        return;
    }
 
    let html = `
<div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" id="close">&times;</button>
            <h2>${caption}</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
            <p>${message}</p>
        </div>
    </div>
</div>
`;
 
    let parser = new DOMParser();
    let doc = parser.parseFromString(html, 'text/html');
    let div_modal = doc.body.firstChild;
    document.body.append(div_modal);
 
    let div_content = document.querySelector("div.modal-content");
    let button_close = document.querySelector("button#close");
 
    function window_onclick(event) {
        if (event.target === div_modal) {
            closeDialog();
        }
    }
    window.addEventListener('click', window_onclick, false);
 
    function button_no_onclick(event) {
        closeDialog();
    }
    button_close.addEventListener("click", button_no_onclick, false);
 
    function closeDialog() {
        window.removeEventListener('click', window_onclick);
        button_close.removeEventListener('click', button_no_onclick);
 
        div_modal.classList.toggle('show-modal');
        div_content.classList.toggle('show-content');
        // удаляем через 0.4 сек, чтобы успела отработать анимация
        setTimeout(function() {
            div_modal.remove();
        }, 0.4 * 1000);
        showMessage.show = false;  // сбрасываем флаг отображения сообщения

        // если очередь не пуста, то через 0.4 сек показать новое сообщение 
        // за 0.4 сек старое сообщение закроется     
        if (messageQueue.length > 0) {
            msg = messageQueue.shift();
            setTimeout(() => showMessage(msg[0], msg[1]), 0.4 * 1000);
        }
    }

    // тут нужна минимальная задержка, чтобы браузер нормально нарисовал анимацию
    // Задержка 4 мс нужна для корректной работы в Firefox (в Chrome и с 1 мс работает)     
    setTimeout(function() {
        div_modal.classList.toggle('show-modal');
        div_content.classList.toggle('show-content');
    }, 4);
    showMessage.show = true;  // установить флаг отображения сообщения
}
/*
        Modal dialog
        */
 
        /* The Modal (background) */
        .modal {
          position: fixed;
          z-index: 1;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          -webkit-transition: opacity 0.4s;
          -moz-transition: opacity 0.4s;
          -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
        }
 
        .show-modal {
          opacity: 1;
        }
 
        /* Modal Content */
        .modal-content {
          position: relative;
          background-color: white;
          margin: auto;
          /*padding: 5px 0 10px 0;*/
          border-radius: 6px;
          width: 50%;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          color: #333333;
          top: -300px;
          -webkit-transition: top 0.4s;
          -moz-transition: top 0.4s;
          -o-transition: top 0.4s;
          transition: top 0.4s;
        }
 
        .show-content {
          top: 0;
        }
 
        /* The Close Button */
        .close {
          color: #cbcbcb;
          float: right;
          font-size: 28px;
          font-weight: bold;
          border: 0;
          background-color: transparent;
        }
 
        .close:hover,
        .close:focus {
          color: #7f7f7f;
          text-decoration: none;
          cursor: pointer;
        }
 
        .modal-header {
          padding: 10px 16px;
        }
 
        .modal-body {
          padding: 10px 16px;
        }
 
        .modal-footer {
          padding: 10px 16px;
          text-align: right;
        }
 
        .modal-footer > button {
          width: 62px;
          height: 34px;
          background-color: inherit;
          border: 1px solid #cccccc;
          border-radius: 4px;
        }
 
        .modal-footer > button:hover {
          background-color: #e6e6e6;
          cursor: pointer;
        }
 
        .line {
          width: 100%;
          border-bottom: 1px solid #e5e5e5;
          position: absolute;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="showMessage('Header', 'Body')">Show Message</button>
    <button type="button" onclick="alert('Заглушка')">Show Confirm Dialog</button>
</body>
</html>

В html и css ничего интересного нет. Вся суть в JavaScript: метод showMessage.

В целом все работает хорошо.

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

Выглядит это так

Пример

В чем может быть проблема? Куда копать?

P.S.: 0.4 * 1000 - длительность анимации открытия/закрытия модального окна (в сек.)

P.P.S.: в window.onload добавлена генерация нового сообщения каждые 3 сек

2
  • Вы бы убрали не относящийся к вопросу код - например, генерацию showConfirmDialog, 10 мар 2020 в 9:10
  • @StepanKasyanenko, исправил.
    – ioprst
    10 мар 2020 в 9:51

1 ответ 1

1

Кажется мне, что проблема была в строчке showMessage.show = false. Так как вы реально закрываете окно через 0.4 секунды, а флаг show ставите "мгновенно".

Так же немного смущало "мгновенное" получение сообщения из очереди, а показ его только через 0.4 секунды.

Привел все в консистетный вид - баг вроде бы ушел. Потестируйте.

window.onload = function() {
  setInterval(() => foo(), 3000); // генерация нового сообщения каждые 3 сек
};

cnt = 0;

function foo() {
  showMessage('cnt', cnt);
  cnt += 1;
}

messageQueue = [];

showMessage.show = false; // флаг того, что сейчас отображается сообщение
function showMessage(caption, message) {
  // если показывается сообщение, то поместить новое сообщение в очередь     
  if (showMessage.show) {
    messageQueue.push([caption, message]);
    console.log(messageQueue);
    return;
  }

  let html = `
<div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" id="close">&times;</button>
            <h2>${caption}</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
            <p>${message}</p>
        </div>
    </div>
</div>
`;

  let parser = new DOMParser();
  let doc = parser.parseFromString(html, 'text/html');
  let div_modal = doc.body.firstChild;
  document.body.append(div_modal);

  let div_content = document.querySelector("div.modal-content");
  let button_close = document.querySelector("button#close");

  function window_onclick(event) {
    if (event.target === div_modal) {
      closeDialog();
    }
  }
  window.addEventListener('click', window_onclick, false);

  function button_no_onclick(event) {
    closeDialog();
  }
  button_close.addEventListener("click", button_no_onclick, false);

  function closeDialog() {
    window.removeEventListener('click', window_onclick);
    button_close.removeEventListener('click', button_no_onclick);

    div_modal.classList.toggle('show-modal');
    div_content.classList.toggle('show-content');
    // удаляем через 0.4 сек, чтобы успела отработать анимация
    setTimeout(function() {
      div_modal.remove();
      showMessage.show = false; // сбрасываем флаг отображения сообщения
    }, 0.4 * 1000);

    // если очередь не пуста, то через 0.4 сек показать новое сообщение 
    // за 0.4 сек старое сообщение закроется     
    if (messageQueue.length > 0) {
      setTimeout(() => {
        msg = messageQueue.shift();
        showMessage(msg[0], msg[1]);
      }, 0.4 * 1000);
    }
  }

  // тут нужна минимальная задержка, чтобы браузер нормально нарисовал анимацию
  // Задержка 4 мс нужна для корректной работы в Firefox (в Chrome и с 1 мс работает)     
  setTimeout(function() {
    div_modal.classList.toggle('show-modal');
    div_content.classList.toggle('show-content');
  }, 4);
  showMessage.show = true; // установить флаг отображения сообщения
}
/*
        Modal dialog
        */


/* The Modal (background) */

.modal {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.show-modal {
  opacity: 1;
}


/* Modal Content */

.modal-content {
  position: relative;
  background-color: white;
  margin: auto;
  /*padding: 5px 0 10px 0;*/
  border-radius: 6px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #333333;
  top: -300px;
  -webkit-transition: top 0.4s;
  -moz-transition: top 0.4s;
  -o-transition: top 0.4s;
  transition: top 0.4s;
}

.show-content {
  top: 0;
}


/* The Close Button */

.close {
  color: #cbcbcb;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: 0;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #7f7f7f;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 10px 16px;
}

.modal-body {
  padding: 10px 16px;
}

.modal-footer {
  padding: 10px 16px;
  text-align: right;
}

.modal-footer>button {
  width: 62px;
  height: 34px;
  background-color: inherit;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.modal-footer>button:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.line {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <button type="button" onclick="showMessage('Header', 'Body')">Show Message</button>
  <button type="button" onclick="alert('Заглушка')">Show Confirm Dialog</button>
</body>

</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.