Question

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

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

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包装后删除eventlistener：

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

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

QuantityonHand INT CHECK (QuantityonHand >= 0 AND QuantityonHand <= 99999)

Answer 2

事件监听器可以工作，就像你使用回调一样。你可以做这个承诺：

var p = new Promise(function(resolve){
    function handler(e){
        //just one time
        mainPanelContent.removeEventListener('webkitAnimationEnd', handler);
        resolve(e);
    }
    var mainPanelContent = document.getElementById('mainPanelContent');
    //probs best to do animation here?
    mainPanelContent.addEventListener('webkitAnimationEnd', handler);
});
p.then(function(e){
   //animationEnded here:
   //e = event data from the animationEnd handler.
});

Javascript - 只分享一个事件监听器，并且还有类似行为的承诺

2 个答案: