函数的暂停功能，而另一个函数则完成。

Question

我在挣扎于这段代码：

在'swapFunc‘函数中，我将一个addEventListener添加到'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);