Изменения, внесенные в DOM во время Promise.catch, исчезают

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

Я добавил .catch() для отображения элемента DOM, если сервер недоступен. При запуске .catch() работает, и элемент DOM отображается, но исчезает через 2 секунды.

Я попытался добавить элемент DOM в .catch(). Я также попытался поместить дополнение DOM во внешнюю функцию и вызвать ее. Я также попытался передать внешнюю функцию в функцию reject(). Ничего не сработало.

--- Таблица стилей ---

   #notice {
       width: 100vw;
       height: 100vh;
       opacity: 0;
       animation: fade-in 2s;
       background-color:white;
       z-index: 60;
       display:flex;
       align-items: center;
       text-align: center;
   }

   #notice h1 {
       font-size: 10vh;
       font-family: 'Verdana';
       color: black;
   }

   #notice * {
       position: static;
   }

---Джаваскрипт---

getSolvedDeck = () => {
  let failed = false;
  new Promise((resolve, reject)=>{
     let xhr = new XMLHttpRequest;
     xhr.open('GET',
              "https://mrlesbomar.com/solitaire/cgi-bin/get_solved_deck.php");
     xhr.onload = () =>{
        if (xhr.status >= 200 && xhr.status < 300) {
           resolve(xhr.response);
        } else {
           reject(xhr.statusText);
        }
     }
     xhr.onerror = () => reject(xhr.statusText);
     xhr.send();
  }).then(stuff=>{
     console.info('Awesomeness');
  }).catch(error=>{
     //Create status screen
     let notice = document.createElement('div');
     notice.id = 'notice';
     notice.innerHTML = '<h1>Error Message</h1><br/>';
     document.getElementsByTagName('main')[0].appendChild(notice);
  });
}

Ожидаемый результат: при ошибке обещания экран заполняется добавленным объектом DOM и остается до тех пор, пока пользователь не предпримет никаких действий. Предоставление пользователю возможности прочитать сообщение.

Фактические результаты: объект DOM добавляется к <main>, заполняет экран и представляет сообщение, но исчезает в течение 2 секунд.

Вопрос: Как сделать так, чтобы действия, выполняемые в .catch(), сохранялись?

Я забыл добавить ключевые кадры в таблицу стилей: @keyframes fade-in{0%{opacity:0;}100%{opacity: 1;}}

Leslie Bomar 09.04.2019 20:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Элемент сохраняется, это css заставляет его исчезнуть. Анимация запускается один раз, останавливается, и мы возвращаемся к opacity: 0. Произойдет даже без JS:

<div id = "notice"></div>
#notice {
  width: 100px;
  height: 100px;
  opacity: 0;
  background: blue;
  animation: fade-in 2s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://codepen.io/anon/pen/YMNaMv?&editable=true

Чтобы #уведомление оставалось на экране, добавьте animation-fill-mode: forwards; к его стилям.

Спасибо. Это сработало отлично, я потратил 2 часа на поиск решения. Я использовал те же свойства анимации/css для другого уведомления в том же приложении, и у меня не было этой проблемы. Даже не думал задавать вопросы CSS.

Leslie Bomar 09.04.2019 20:58

Другие вопросы по теме