防止另一個正在運行的事件被執行

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

它基本上添加的所有事件函數成摞，然後消耗這個堆棧，直到它是空的。