Могу ли я в чистом javascript в асинхронной функции подождать возникновения события?

То есть написать:
async function foo() {
	//делаю что то
	await <Как-то жду событие, 
	просто жду его возникновения>
	//делаю что то
}

?
  • Вопрос задан
  • 695 просмотров
Решения вопроса 2
lazalu68
@lazalu68
Salmon
Конечно можете. После await у вас должен идти промис, который будет ресолвиться из обработчика события. Если речь о событиях DOM, то как-то так:

HTMLElement.prototype.waitFor = function(event_name) {
    if (event_name) {
        return new Promise((res, rej) => {
        	const listener = function() {
        		res()
        		this.removeEventListener(event_name, listener)
        	};

        	this.addEventListener(event_name, listener);
        })
    } else {
        throw 'No event passed to waitFor method!';
    }
}

async function foo() {
	const start = new Date();
	await document.querySelector('body').waitFor('click');
	console.log('uspeshno dojdalis clicka, jdali celih ' + ((new Date().getTime() - start.getTime())/1000) + ' sekund');
}

foo();
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Первое что нужно понимать, что async/await - это всего лишь синтаксический сахар над промисами, а значит имеет все особенности работы с ними:
Во-первых, промис может разрешится (или отклонится, но в этой задаче reject не нужен) только единожды. Это сильно отличает их от событий, которые могут происходить многократно.
Во-вторых, промисы обрабатываются на особой фазе event loop называемой microtasks, что опять же отличается от событий, которые выполняются на другой фазе (tasks). Это означает, что обработка промиса (колбэк метода then, или сахар над ним в виде await оператора) всегда произойдет асинхронно от возникновения события. Это накладывает ряд ограничений, например не получится сделать preventDefault у объекта или не получится запустить действия требующие синхронной работы из trusted события (play не muted video/audio, вход в фулскрин и тд).

В простом варианте можно слушать событие разово, для чего можно использовать параметр once. Так же для оптимизации можно использовать параметр passive, так как нам все равно поздно вызывать preventDefault, а в некоторых случаях это может дать нам оптимизацию. Ну и управлять параметром capture попросту бесполезно, так как обработка будет в любом случае после обеих фаз. В итоге для этого можно пользоваться такой функцией хелпером:
function listenOnce(target, event) {
    return new Promise(resolve => {
        target.addEventListener(event, resolve, {
            once: true,
            passive: true
        });
    });
}

// использование
const event = await listenOnce(document, 'DOMContentLoaded');
console.log(event);


Если же нужно слушать событие многократно, то разумно обернуть прослушивание события в асинхронный итератор. Здесь так же присутствуют все ограничения связанные с промисами, но за счет того, что у нас будет итератор по множеству промисов, мы сможем слушать событие многократно. так же тут нужно предусмотреть возможность отписаться от события. Хелпер для данного случая получится такой:
function listen(target, event) {
    let currentResolve = () => {};
    const handler = event => currentResolve({value: event, done: false});
    return {
        [Symbol.asyncIterator]() {
            target.addEventListener(event, handler, {passive: true});
            return {next: () => new Promise(resolve => {
                currentResolve = resolve;
            })};
        },
        stop() {
            target.removeEventListener(event, handler);
            currentResolve({done: true});
        }
    };
}

// использование
for await(const event = listenOnce(window, 'scroll')) {
    console.log(event);
}

// с отпиской
const eventIterator = listenOnce(window, 'scroll');
let count = 10;
for await(const event = eventIterator) {
    console.log(event);
    if(--i === 0) {
        eventIterator.stop();
    }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы