另一個功能完成時暫停功能

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