Kozack Oct 21 2019 at 19:09

Делаем интерфейс более отзывчивым благодаря отложенному Promise

2 min

5.7K

JavaScript *

Tutorial

+13

Comments 18

bvn13 Oct 21 2019 at 19:22

FF 69.0.2 (64-bit) on Ubuntu 18.04.3 — ни одна ваша кнопка не делает ничего. Все примеры неотзывчивы. Ну, либо я что-то делаю не так.

igormich88 Oct 21 2019 at 22:52

FF 69.0.3 (64-битный), Windows 7
Аналогичное поведение, нет реакции на нажатие кнопок.

Denai Oct 22 2019 at 02:45

71.0b2 (64-битный), win10. Аналогично

Kozack Oct 22 2019 at 09:54

Всё из-за того, что FF не работает с тегом

<dialog>

. Изменил примеры, но на суть статьи это не влияет.

Vitalley Oct 22 2019 at 16:49

У меня есть, но никакой разницы я не увидел

tuxi Oct 21 2019 at 19:27

FF 69.0.1 / win7 64 pro
никакой разницы не почувствовал

polyakov_andrey Oct 21 2019 at 19:42

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

Kozack Oct 21 2019 at 20:00

Поэтому до того как загрузятся данные форма заблокирована. Суть в том, чтобы выполнить максимальное количество работы пока загружаются данные. Чтобы когда они загрузились — осталось выполнить минимум. Если отображать прелоадер, то потом его нужно удалять и заменять формой. Лучше всего показать форму, с прелоадером внутри. Но это уже детали выходящие за пределы темы материала.

Griboks Oct 21 2019 at 20:21

Пример слишком плохой, чтобы быть хорошим. Классическое решение — отвлечь пользователя. Он не должен следить за тем, в каких полях есть текст, а в каких ещё не загрузился.
1. Нажимает кнопку.
2. Появляется плейсхолдер/лоадер/анимация/что-то яркое и выделяющееся/тип/краткая справка или доп. информация. И не забывает интуитивно понятный интерфейс, а то ещё подумает, что страница зависла и обновит её.
3. Когда все данные готовы, отображается форма. Причём контрастно с заглушкой, чтобы это было видно беглым взглядом.

Но сама идея, что следует использовать промисы. Это да… это одобряю.

funca Oct 21 2019 at 23:05

Проблема с промисами в том, что их нельзя отметить. Создавая промисы заранее не всегда очевидно, будет-ли еще нужен результат в будущем. В промежутке может произойти ошибка, пользователь может передумать и т.п. Когда задача выглядит как процесс, т.е имеет зависимость от времени, удобнее использовать такие структуры как итераторы, Observable, streams и т.п.

Griboks Oct 21 2019 at 23:17

Согласен, но результат промисов можно просто не использовать. Хотя, это зависит от архитектуры.

AriesUa Oct 22 2019 at 10:30

Что касается ошибки промиса, то его всегда можно поймать в «catch» и уже обработать. Показать сообщение об ошибке/сделать редирект/итд.

Что касаемо отмены промиса. То здесь работа не для промиса, а для самого реквеста. XMLHttpRequest/fetch позволяют вызвать cancel запроса. Промис, он служит для ожидания выполнения.

VolCh Oct 23 2019 at 07:18

Замыкания в JS позволяют создавать "отменяемые промисы", "промисы с таймаутами" и т. п.

Kozack Oct 23 2019 at 12:20

Попробуйте замерить время выполнения. Скажем с помощью console.time()

funca Oct 23 2019 at 23:03

Есть много структур, для которых можно продумать осмысленное преобразование к промису. В конце концов промис это абстракция над значением (value).

morr Oct 21 2019 at 23:51

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

Подобные оптимизации имеют право на жизнь, но применять их на практике стоит по необходимости, когда что-то начинает тормозить.

Kozack Oct 22 2019 at 09:42

Простота — важна.
Но, суть в том, чтобы не тратить время и в процессе ожидания асинхронного ответа выполнить максимум работы. Выполнить все операции с DOM, добавить элементы где нужно, проставить классы если нужно, применить стили и т.д. Чтобы когда асинхронная операция закончится у вас уже всё было готово. Это не обязательно предложенная мною «выключенная форма».

morr Oct 22 2019 at 15:40

Может быть добавить нечто подобное в конец статьи? Статья же заявлена как туториал новичкам.