Question

我正在努力解决这个问题：

在'swapFunc'函数中，我将addEventListener附加到'tEleBaby'元素，之后，我通过替换'tEleBaby'类来触发addEventListener。

问题在于'setTimeout'中的代码，需要在'animListener'函数完成后运行。我不热衷于使用setTimeout，所以更喜欢更合理/更正确的处理方式。

swapFunc: function swapFunc(tEle, swapEle) {
    var tEle = document.getElementById(tEle);
    var tEleBaby = tEle.children[0];
    tEleBaby.addEventListener("animationend", this.animListener, false);
    tEleBaby.classList.add("animFadeOut");
    // I want to remove the setTimeout; i.e. the animListener func should feedback to swapFunc
    setTimeout(function () {
        tEle.id = swapEle;
        tEle.setAttribute("data-action", dataAction);
        tEle.setAttribute("data-tooltip", dataTooltip);
    }, 500);
},

animListener: function animListener(ev) {
    if (ev.type.toLowerCase().indexOf("animationend") >= 0) {
        var eventTarget = ev.target;
        eventTarget.className = "animFadeIn cFBIcons";
    }
},

Answer 1

以这种方式尝试：

swapFunc: function swapFunc(tEle, swapEle) {
    var tEle = document.getElementById(tEle);
    var tEleBaby = tEle.children[0];
    tEleBaby.addEventListener("animationend", listener, false);
    tEleBaby.classList.add("animFadeOut");

    function listener(ev) {
        animListener(ev, callMe);
    }

    function callMe() {
        tEle.id = swapEle;
        tEle.setAttribute("data-action", dataAction);
        tEle.setAttribute("data-tooltip", dataTooltip);
    }
},

animListener: function animListener(ev, callback) {
    if (ev.type.toLowerCase().indexOf("animationend") >= 0) {
        var eventTarget = ev.target;
        eventTarget.className = "animFadeIn cFBIcons";
    }
    callback();
},

Answer 2

为什么不简单地将该代码放在事件处理程序中？

var self = this;

tEleBaby.addEventListener ("animationend" , function (ev) {
    self.animListener(ev);
    //rest of code
} , false);

另一个功能完成时暂停功能

2 个答案: