javascript - 如何使用 jQuery 防止 mouseenter 事件操作

Question

我有这个简单的 mouseenter : mouseleave Action :

call = $('.js-call');

call.on({
    mouseenter: function(e){
       // animation
       e.stopPropagation();
    },
    mouseleave: function(e){
        // animation
    }
});

在这个 Action 中，我有两个 CSS 动画，持续时间为 300 毫秒。我怎样才能防止动画结束的鼠标悬停事件，如果我在调用元素上正确地再次触发它。当我快速移动我的调用元素操作调用多次时。如何预防？感谢您的帮助。

Answer 1

我会为这两个事件设置超时，并且只有在超时结束时您仍然满足条件时才激事件画。类似的东西:

var timeoutIn, timeoutOut, delay = 300;
$element.hover(
    function() {
        if (timeoutOut){
            clearTimeout(timeoutOut);
        }
        timeoutIn = setTimeout(function() {
            // ##################
            // 'MOUSEENTER' STUFF GOES HERE
            // ##################
        }, delay);
    },
    function() {
        if (timeoutIn){
            clearTimeout(timeoutIn);
        }
        timeoutOut = setTimeout(function() {
            // ##################
            // 'MOUSELEAVE' STUFF GOES HERE
            // ##################
        }, delay);
    }
);

更新:我刚刚创建了一个名为 jQuery.hoverDelay.js 的 jQuery 插件，您可以在这里查看: jQuery hoverDelay.js