Можно ли отключить все остальные события во время выполнения события?
Например, у меня есть какое-то событие нажмите, и пока я запускаю любое событие селектора, все остальные события селектора должны быть запрещать, пока текущее событие не завершится.
Я нажал на селектор-а, затем еще раз нажал на селектор-б
document.querySelector('.selector-a').addEventListener('click', function() {
setTimeOut(function() {
console.info('event A');
}, 500);
});
document.querySelector('.selector-b').addEventListener('click', function() {
console.info('event B');
});
Мой ожидаемый результат:
event A
event B
event B
event B
.....
Но фактический результат был:
event B
event A
event B
event B
.....
Некоторые из моих друзей посоветовали мне использовать Перезвоните(), но я не думаю, что его можно использовать с addEventListener. Может ли кто-нибудь объяснить, почему я должен использовать Перезвоните() или есть другие способы решить эту проблему?
Всем хорошего дня :)
Самый простой способ — добавить переменную disabled и изменить ее на true/false при щелчке по мере необходимости, проверяя значение перед запуском другого события щелчка.
Я не понимаю вопроса "в то время как я запускаю любое событие селектора, все остальные события селектора должны быть отключены до тех пор, пока текущее событие не завершит выполнение" - вы НИКОГДА не получите два события, выполняемых одновременно. Только один будет работать одновременно. Даже если запущено несколько обработчиков событий, они будут выполняться последовательно. «Некоторые из моих друзей посоветовали мне использовать callback(), но я не думаю, что его можно использовать с addEventListener».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Фактическое событие клика нельзя полностью предотвратить, но логика, которую вы ищете, может быть достигнута относительно легко — просто установите логический флаг, когда у вас есть что-то асинхронное, и вы можете проверить его на каждом слушателе, чтобы клики могли игнорироваться, пока флаг не будет сброшен:
let somethingRunning = false;
document.querySelector('.selector-a').addEventListener('click', function() {
if (somethingRunning) return;
somethingRunning = true;
setTimeOut(function() {
console.info('event A');
somethingRunning = false;
}, 500);
});
document.querySelector('.selector-b').addEventListener('click', function() {
if (somethingRunning) return;
console.info('event B');
});
Обратите внимание, что полностью синхронные обработчики, такие как .selector-b, не нужно переназначать somethingRunning, потому что такой обработчик всегда будет выполняться до конца, прежде чем сможет запуститься другой обработчик.
Проще говоря, это невозможно, но с помощью некоторой логики, такой как флаг, мы можем, но предположим, что вы нажали «селектор a», и какая-то операция продолжается, и в то же время вы нажали «селектор b», тогда вы можете избежать выполнения по флагу, но как вы убедитесь, что когда первое выполнение завершено, должен быть механизм для выполнения операции второго щелчка .
Но чтобы избежать щелчка всякий раз, когда пользователь нажимает и происходит какое-то действие, добавьте на страницу наложение, чтобы пользователь не мог получить доступ к какой-либо активной части пользовательского интерфейса.
Причина, по которой вы не получаете ожидаемого результата, заключается в том, как работает javascript. Когда вы вызываете setTimout`, он будет работать асинхронно, поэтому функция, которую вы передали в setTimout, перейдет в браузер и через 500 миллисекунд будет передана в очередь, а затем цикл событий выполнит проверку стека, если он пуст, когда стек пусто, он начнет выполнение кода из очереди.
Но чтобы вы получили ожидаемый результат, вы можете сделать это с помощью флага, если вы используете флаг (пример isWaiting), функция из .selector-b будет прервана до тех пор, пока не будет выполнена функция из .selector-a. Затем это позволит вам запустить функцию из .selector-b.
Как на этом комментарий.
Просто используйте переменную, например
var blocked = false;Теперь установите для нее значение true в первом прослушивателе событий, а во втором выполните проверку:if (blocked) return; // do nothing