Javascript 使用EventListener解析承诺

我在一个弹出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));
    }
}

---

您不需要将承诺传递给事件处理程序，您需要传递

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();
    });
});

---

或者，我们可以创建一个可重用的实用程序函数，作为从任何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源缓冲区）：

---

根据具体情况，可能需要使用

run

参数来提供触发异步操作的自定义代码（如上所述），如果我们知道操作已经开始，则可以省略该参数。

谢谢您提供的信息。第一个选项没有删除事件侦听器。我使用第二种方法。我们已经看到了一些关于不使用局部变量来承载此对象的说明。但在这种情况下，我们还没有找到一种不这样做的方法。ItadeventListener用于在对象或DOM元素上设置事件。它需要回调，这是一种“旧”的做事方式。有没有一种简单的方法可以将addEventListener封装在承诺中，这样就可以使用“then”和“catch”了？我希望在我的程序中有这种一致性。这个问题似乎还没有一个可接受的答案，即使两年后也是如此。当然，明显的区别是，同一事件可以反复发生，而单个异步操作只发生一次。承诺只有一个挂起状态，它只会一次更改为已实现或已拒绝的状态。这与反复发生的事件不太匹配。它也不能很好地匹配多次出现的setInterval，但可以很好地匹配一次出现的setTimeout。

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