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

Pause function while another function finishes

本文关键字：功能 暂停 完成时 另一个      更新时间：2023-09-26

我正在与以下代码作斗争：

在"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";
    }
},

这样试试：

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

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

var self = this;
tEleBaby.addEventListener ("animationend" , function (ev) {
    self.animListener(ev);
    //rest of code
} , false);
相关文章：