使用 EventListener 解决承诺

Question

我正在处理一个弹出式 div，我想在动画上附加一个承诺，这样我就可以在弹出式窗口结束后做一些事情。

我的方法不起作用，因为我找不到将承诺传递给事件处理程序上的函数的方法。似乎你不能在这里使用 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));
    }
}

原文由 Jose Neto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不需要将承诺传递给事件处理程序，您需要传递 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();
    });
});

原文由 Volune 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 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 参数来提供自定义代码来触发异步操作（如上所述），或者如果我们知道操作已经开始则省略。

原文由 Patrick Kunka 发布，翻译遵循 CC BY-SA 4.0 许可协议