Можно ли отключить все остальные события во время выполнения события? - PullRequest
Новая
       38

Можно ли отключить все остальные события во время выполнения события?

0 голосов
/ 25 апреля 2019

Например, у меня есть какое-то событие click , и пока я запускаю событие любого селектора, все остальные события селектора должны быть отключить до тех пор, пока текущее событие не завершится.

Я нажал на selector-a , затем несколько раз нажал на selector-b 

document.querySelector('.selector-a').addEventListener('click', function() {
  setTimeOut(function() {
    console.log('event A');
  }, 500);
});

document.querySelector('.selector-b').addEventListener('click', function() {
  console.log('event B');
});

Мой ожидаемый результат: 

event A
event B
event B
event B
.....

Но фактический результат был: 

event B
event A
event B
event B
.....

Некоторые из моих друзей сказали мне использовать callback () , но я не думаю, что его можно использовать с addEventListener . Кто-нибудь может объяснить, почему я должен использовать callback () или есть другие способы решить эту проблему?

Всем хорошего дня:)

Ответы [ 3 ]

0 голосов
/ 25 апреля 2019

Проще говоря, это невозможно, но с помощью некоторой логики, такой как флаг, мы можем, но Предположим, вы щелкнули «селектор a», и какая-то операция продолжается, и в то же время, когда вы щелкнули «селектор b», вы можете избежать выполнения с помощью флага, но как вы будете гарантировать, что после завершения первого выполнения должен быть механизм для выполнения операции второго щелчка .

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

0 голосов
/ 25 апреля 2019

Причина, по которой вы не получаете ожидаемый результат, заключается в том, как работает javascript.Когда вы вызываете setTimout `, он будет работать асинхронно, поэтому функция, которую вы передали в setTimout, перейдет в браузер и через 500 миллисекунд будет передана в очередь, а затем цикл обработки событий выполнитпроверка стека, если он пуст, когда стек пуст, он начнет выполнять код из очереди.

Но для получения ожидаемого результата вы можете сделать это с флагом, если вы используете флаг (пример isWaiting) функция из .selector-b будет прерываться до тех пор, пока не будет выполнена функция из .selector-a.Тогда это позволит вам запустить функцию с .selector-b.Как на этот комментарий .

0 голосов
/ 25 апреля 2019

Фактическое событие щелчка не может быть полностью предотвращено, но логику, которую вы ищете, можно достичь относительно легко - просто установите логический флаг, когда у вас запущено что-то асинхронное, и вы можете проверить его на каждом слушателе, чтобыэти щелчки можно игнорировать до тех пор, пока флаг не будет сброшен: 

let somethingRunning = false;
document.querySelector('.selector-a').addEventListener('click', function() {
  if (somethingRunning) return;
  somethingRunning = true;
  setTimeOut(function() {
    console.log('event A');
    somethingRunning = false;
  }, 500);
});

document.querySelector('.selector-b').addEventListener('click', function() {
  if (somethingRunning) return;
  console.log('event B');
});

Обратите внимание, что полностью синхронные обработчики, как и в случае .selector-b, не должны переназначать somethingRunning, потому что такой обработчик всегда будет работать дляконец до запуска другого обработчика.

...