使用EventListener解析一个promise

Question

我正在制作一个弹出式div,我想对动画附加一个承诺,所以我可以在弹出结束后做一些事情.

我的方法不起作用,因为我找不到将promise传递给事件处理程序上的函数的方法.似乎你不能在这里使用bind.我已经尝试过,虽然我可以解决这个承诺,但我无法删除事件处理程序

这里有什么不同的解决方案？

function EventListenerForPopUp() {
    this.removeEventListener("animationend", EventListenerForPopUp );
    this.Show.resolve();
}   

function ShowHideDiv() {        
    this.Show = function () { 
        return new Promise(function(resolve, reject) {
            this.Div.addEventListener("animationend", EventListenerForPopUp, false);
        }.bind(this));
    }
}

Answer 1

您不需要将promise传递给事件处理程序,您需要传递resolve回调:

function EventListenerForPopUp(resolve) {
            this.removeEventListener("animationend", EventListenerForPopUp );
            resolve();
}   

// [...]

        return new Promise(function(resolve, reject) {
            this.Div.addEventListener("animationend", function() {
                EventListenerForPopUp.call(this, resolve);
            }, false);

这看起来有点难看,也许你可以看看这样的东西:

var div = this.Div;
return new Promise(function (resolve) {
    div.addEventListener("animationend", function animationendListener() {
        div.removeEventListener("animationend", animationendListener);
        //call any handler you want here, if needed
        resolve();
    });
});

Answer 2

或者，我们可以创建一个可重用的实用函数，作为从任何 DOM 事件创建 Promise 的方法：

const createPromiseFromDomEvent = (eventTarget, eventName, run?) =>
    new Promise((resolve, reject) => {
        const handleEvent = () => {
            eventTarget.removeEventListener(eventName, handleEvent);

            resolve();
        };

        eventTarget.addEventListener(eventName, handleEvent);

        try {
            if (run) run();
        catch (err) {
            reject(err);
        }
    });

使用示例（使用 MSE 源缓冲区）：

await createPromiseFromDomEvent(
    sourceBuffer,
    'update',
    () => sourceBuffer.remove(3, 10)
);

根据情况，run可能需要该参数来提供自定义代码来触发异步操作（如上所述），或者如果我们知道操作已经开始，则可以省略该参数。