DerekT-P Ответов: 2

Как сделать хром заново рендерить элементы, прежде чем показывать оповещения?

В сценарии проверки я устанавливаю класс недопустимых элементов таким образом, чтобы они отображались красным цветом, а затем отображался alert попросите пользователя исправить выделенные ошибки.
Однако в Chrome предупреждение отображается до того, как элемент будет перерисован. Это может привести к путанице для пользователя, так как нет выделенных полей.
Когда вы проходите через код, все работает нормально, так как страница перерисовывается на каждом шаге.

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

Что я уже пробовал:

Хотя это кажется "неправильным" подходом, я попытался поместить предупреждение в setTimeout звоните, оттягивая время alert на секунду (или больше, или меньше). Однако это не имеет необходимого эффекта; повторная визуализация выделенного поля ввода все еще не происходит до тех пор, пока не будет показано окно предупреждения.

Я тоже пытался
$('#txtDemo').hide().show()
но никакой помощи...
Поиск в Google предполагает, что у других были подобные проблемы, и они обнаружили, что запрос offsetHeight может заставить Chrome перерисовать, но этот обходной путь не работает в текущих версиях Chrome.

Смотрите мою демо-страницу по адресу codeproject.derektp.co.uk/sequence.htm[^]

2 Ответов

Рейтинг:
6

Dar Brett

Возможно, это стоит того, чтобы прочитать это: Модель параллелизма и цикл событий - JavaScript | MDN[^]

В принципе ваше решение об использовании setTimeout должно работать примерно так этот сайт CodePen[^], если вы сравните это с вашей попыткой использовать set timeout, я думаю, вы обнаружите, что, вероятно, случайно переместили код, устанавливающий класс внутри обработчика событий setTimeout, - если нет, то вы также должны опубликовать этот код.

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

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

DerekT-P

Спасибо, Дар. Да, я понял однопоточность, но взял неподходящий ярлык на setTimeout! т. е. setTimeout(alert('message'),100) вместо того, чтобы заключать предупреждение в функцию. До.
Это решает проблему, но все равно кажется уродливым клуджем, и тот, который не нужен для Edge, IE или Firefox. Ну что ж.
Еще раз спасибо, что нашли время ответить и привести рабочий пример!

Рейтинг:
1

MadMyche

Не решение для этого, но предложение или два...

Не используйте универсальную функцию "оповещения". Попробуйте использовать Модальный окно и дать конечному пользователю более приятный опыт. Отличным примером может служить проверка номера телефона, где вы можете указать различные форматы, которые принимаются.

Другой вариант-иметь две отдельные процедуры проверки; одна меняет цвет на красный при различных событиях (onblur и т. д.), Чтобы изменить цвет, а затем "отправить" проверку, которая выскакивает, что у них есть поля для исправления

F-ES Sitecore

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

DerekT-P

Thanks MadMyche and F-ES Sitecore for your suggestions. In this instance the message is only shown if the user tries to submit the form without first at least having tabbed through the form fields. If a field is invalid on "Blur" then it's flagged as an error immediately, so the need for an explicit pop-up message is just as a "back-stop" and should be rarely encountered. There's a (low) fixed budget and even swapping a simple "alert" statement for a modal popup takes development and testing time for a feature which will only be very rarely used. In other situations I do use modal messages and/or messages under/next to error fields. A problem with the latter is that they can make the form layout "jump around" (or at least the window to scroll) which can be irritating. On the desktop I prefer to use mouseover pop-ups (non-modal) to give additional feedback, but they're not so great on mobile devices.