Он и так ждёт полного выполнения, если всё
синхронно.
<button id="button">click me</button>
<script>
function stall(ms) {
const iterator = (function *() {
const end = Date.now() + ms;
while(Date.now() < end) yield true;
}());
while(iterator.next().value);
}
function logTime(name) {
console.log(name, new Date().toLocaleTimeString());
}
button.addEventListener('click', () => {
logTime(1);
stall(10000);
})
button.addEventListener('click', () => {
logTime(2);
})
</script>
Если же у тебя там какие-то
асинхронные действия выполняются, то только отменять событие по умолчанию на время ожидания асинхронного ответа(event.preventDefault()) и вызывать нужные действий руками после завершения ожидания.
Условно:
<button id="button">click me</button>
<script>
function delay(ms) {
return new Promise(r => setTimeout(r, ms, true));
}
function logTime(name) {
console.log(name, new Date().toLocaleTimeString());
}
let queue = null;
button.addEventListener('click', async () => {
if (queue) return;
logTime(1);
queue = [];
await delay(10000);
queue.forEach(([name, func]) => {
console.log('queued event', name);
func();
});
queue = null;
})
button.addEventListener('click', (event) => {
if (queue) {
queue.push(['click 2', () => logTime(2)])
event.preventDefault();
event.stopPropagation();
} else {
logTime(2)
}
})
</script>