javascript - 在另一个函数完成时暂停函数

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