javascript - 防止事件在另一个事件正在运行时执行

Question

我正在尝试为我的网站构建一个作品集部分，其中当悬停项目名称时背景图像会淡入，当光标离开项目名称时背景图像会淡出。这工作正常，但我面临的问题是，当我快速从一个项目名称悬停到另一个项目名称时，“mouseenter”事件被触发，而“mouseleave”事件仍在运行，等待动画完成。

是否有办法防止在“mouseleave”事件仍在运行时触发“mouseenter”事件？

我已经设置了codepen但它无法正常工作，这是 codepen 的限制吗？我的full code is available on Github (需要 Jekyll 和 Gulp)。

这是我正在使用的代码:

$('#barba__wrapper').on('mouseover', '.portfolio__link', function(event) {
  var currentImage = $('.portfolio__image--current');
  var portfolioImg = $(this).parent().data('img');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.css('background-image', 'url('+ portfolioImg +')');
  currentImage.addClass('animated fade-in').one(animationEnd, function() {
   currentImage.removeClass('animated fade-in');
  });
});

$('#barba__wrapper').on('mouseleave', '.portfolio__link', function(event) {
  var currentImage = $('.portfolio__image--current');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.addClass('animated fade-out').one(animationEnd, function() {
    currentImage.css('background-image', '');
    currentImage.removeClass('animated fade-out');
  });
});

感谢您的宝贵时间! :)

Answer 1

这有点过分了，但你可以使用这样的事件堆栈:

        var actionsStack = [];
var needWait = false;

var mouseOverAction = function(target){
  var currentImage = $('.portfolio__image--current');
  var portfolioImg = target.parent().data('img');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.css('background-image', 'url('+ portfolioImg +')');
  currentImage.addClass('animated fade-in').one(animationEnd, function() {
   currentImage.removeClass('animated fade-in');
   needWait = false;
   handleStack();
  });
};

var mouseLeaveAction = function(target)
{
  var currentImage = $('.portfolio__image--current');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.addClass('animated fade-out').one(animationEnd, function() {
    currentImage.css('background-image', '');
    currentImage.removeClass('animated fade-out');
    needWait = false;
   handleStack();
  });
};

var addAction = function(action, target)
{
    actionsStack.push({ action: action, target: target });
    handleStack();
};

var handleStack = function()
{
    if(actionsStack.length > 0 && !needWait)
    {
        needWait = true;
        var item = actionsStack.shift();
        item.action(item.target);
    }
};

$('#barba__wrapper').on('mouseover', '.portfolio__link', function(event) {
  addAction(mouseOverAction, $(this));
});

$('#barba__wrapper').on('mouseleave', '.portfolio__link', function(event) {
  addAction(mouseLeaveAction, $(this));
});

它基本上将所有事件函数添加到一个堆栈中，然后消耗这个堆栈直到它为空。