javascript - 使用 EventListener 解决 promise

Question

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

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

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

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