Когда вы видите кнопку на странице, возникает ли у вас желание лихорадочно щелкнуть ее? Пожалуйста, будьте добры к нашей фронтенд-разработке, не нажимайте кнопку на странице много раз (шучу~
В процессе разработки веб-разработки,Защити себяВ соответствии с принципом не доверять пользователям, нам необходимо добавить «замки» к определенным кнопкам или точкам доступа, которые часто срабатывают. Блокировки здесь относятся к тому факту, что многократные нажатия кнопок не допускаются в течение короткого периода времени.
В первую очередь необходимо сказать о повторных кликах.
К каким последствиям это приведет? Возьмите обыкновенный каштан:
Кнопка покупки на странице сведений о продукте, если нет соответствующего ограничения на поведение пользователя при нажатии, может привести к следующим результатам:
- Пользователи могут размещать несколько заказов и создавать несколько заказов
- Частота кликов слишком высока, а интерфейс заказа исчерпан.
- Также могут быть неизвестные эмпирические проблемы
- ......
Это всего лишь один из сценариев, связанных с кликами пользователей. Представьте, что на более сложной странице формы может быть много кликабельных элементов. Если клики не ограничены на глобальном уровне, это может оказать неизмеримое влияние на всю страницу.
Итак, как он должен быть заблокирован?
Суть очень проста — регистрируйте блокировку перед вызовом метода или выполнением метода и проверяйте, снята ли блокировка при следующем вызове метода.
Давайте проследим за кодом, чтобы увидеть, как должна быть реализована эта блокировка:
Во-первых, давайте определим определение некоторых основных переменных для глобального блокировки. Чтобы облегчить восстановление состояния блокировки, DefalutLockOption определяется в начале, что является данными по умолчанию методом глобального блокировки. После лосотки данные, необходимые для операций блокировки, принимают или изменены здесь. Weloadoption - это метод восстановления состояния блокировки, а специфическое переменное значение показано на рисунке.
Вышеизложенное является основной функцией глобальной блокировки, конечно же, операция «блокировки». Он принимает два параметра — следует ли автоматически снимать блокировку и время автоматического снятия блокировки. Но вы обнаружите, что при установке времени разблокировки я все же написал 10000 мс, чтобы избежать некоторых страниц, на которые нельзя щелкнуть из-за невозможности вручную отменить блокировку.
Ввести условие первого суда, еслиEndTime для lockOption имеет значениеи ужеВремя снятия блокировки прошлоНу наконец тоТекущее состояние блокировки заблокировано. Удовлетворяя такому ряду условий, мы считаем блокировку «отпущенной» или «освобожденной». Поэтому при вызове lock() конфигурация блокировки будет сброшена, а _lockStatus = false (указывая, что вызов не находится в заблокированном состоянии, можно продолжать выполнение).
Сразу же после следующего условия оценки _lockStatus фактически ссылается на фактическое состояние глобальной блокировки при вызове lock().time. затем вернуть _lockStatusОбратите внимание, здесь не возвращается lockOption.lockStatus.
Просто чтение текста может немного сбить с толку.Я обобщил схематическую диаграмму, чтобы показать полный процесс блокировки события разблокировки-блокировки-освобождения:
Как это использовать?
Вышеупомянутое является лишь одним из сценариев, фактически все интерактивные области могут использовать этот режим для ограничения частоты срабатывания.Нажмите, чтобы перейти к демонстрации, исходный код и эффект реализации можно увидеть интуитивно ~ Если обойти это, вы можете посмотреть на это с предыдущим анализом.