Javascript - 只共享一个事件监听器并具有类似行为的 promise

Question

我有一个动画在一堆函数之前运行。我只需要在动画完成后才运行这些功能......一种类似行为的 promise 。我有一个事件监听器。但问题是，为了提高效率，我只想拥有一个所有 page 函数都可以使用的事件监听器。

这可以通过单个事件监听器实现吗？以及当事件监听器触发时如何实现类似 promise 的行为？

var mainPanelContent = document.getElementById('mainPanelContent');
mainPanelContent.addEventListener('webkitAnimationEnd', function (eve) {
  console.log('anamation is done');
});

---

page('/', function (event) {
  if (currentPage !== 0) {
    //ON 'webkitAnimationEnd' do the below code
    clickOnHome();
    pageName = elementList[currentPage].localName;
    toggleAllButActivePage(pageName);
    findContentAndShow('home');
  }
});

page('/portfolio', function () {
  if (currentPage !=1) {
    //ON 'webkitAnimationEnd' do the below code
    toggleAllButActivePage('portfolio-page');
    findContentAndShow('portfolio-page');
    clickOnPage('rgb(68, 89, 99)');
  }
});
page('/resume', function () {
  if (currentPage !=2) {
    //ON 'webkitAnimationEnd' do the below code
    toggleAllButActivePage('resume-page');
    findContentAndShow('resume-page');
    clickOnPage('#424242');
  });

解决方案:

感谢您的建议，我最终采用此方法是为了让代码更简洁，否则我将不得不在每次 promise 包装后删除事件监听器:

var afterSlideDown = { runStack: function() {} }

mainPanelContent.addEventListener('webkitAnimationEnd', function (animationEvent) {
  if (animationEvent.animationName === "slide-down") {
    afterSlideDown.runStack();
    mainPanelContent.classList.remove('slide-down-now')
  }
});

---

function portfolio() {
  toggleAllButActivePage('portfolio-page');
  findContentAndShow('portfolio-page');
  clickOnPage('rgb(68, 89, 99)');
}

page('/portfolio', function () {
  if (currentPage !=1) {
    afterSlideDown.runStack = portfolio;
    mainPanelContent.classList.add('slide-down-now');
  }
});

Answer 1

这样的事情应该有帮助吗？

var mainPanelContent = document.getElementById('mainPanelContent');

function addCustomEventListener()
{
    return new Promise(function(resolve, reject){

        mainPanelContent.addEventListener('webkitAnimationEnd', function (eve) {

          resolve(true);

          // you can come up with some logic to do a reject() ;-)

        });

    }); 
}

addCustomEventListener().then(function(){

     // should be called when promise is resolved
     console.log('anamation is done');

});